Issue
I am trying to create custom tooltip. I am relatively new to HTML and CSS. The problem is that I followed tutorial about tooltips but I get double display of tooltip on hover. I see my custom tooltip and the stock one together. I wish to see only the custom one.
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;
}
Solution
Found A solution!
Remove the title attribute - @Robert
And in css:
content: "My content";
Answered By - Dim
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.