html - 双工具提示弹出

Question

我正在尝试创建自定义工具提示。我对 HTML 和 CSS 比较陌生。问题是我遵循了有关工具提示的教程，但在悬停时我得到了双重显示的工具提示。我同时看到了我的自定义工具提示和常用工具提示。我希望只看到自定义的。

HTML:

<button class="tooltip" title="Site1 tooltip." id=main1 type="button" onclick="loadData(1)">
    <img src="Images/Icon.png" width="68" height="68"/>
</button> 

CSS:

.tooltip{
    display: inline;
    position: relative;
}


.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: attr(title);
    left: 50%;
    position: absolute;
    z-index: 99;
}

Answer 1

移除 title 属性，它负责标准工具提示。