After setting css for tooltip, it appears twice

Question

After setting CSS for the msg tooltip, it appears twice on the screen. The following is a view of implementation.

<a href="#" title="This is some information for our tooltip." class="tooltip"> <span title="More">CSS3 Tooltip</span> </a> 

 .tooltip { display: inline; position: relative; } .tooltip:hover:after { background: #333; background: rgba(0,0,0,.8); border-radius: 5px; top: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before { border: solid; border-color: #333 transparent; border-width: 0 6px 6px 6px; top: 20px; content: ""; left: 50%; position: absolute; z-index: 99; } 

Output Example:

Help me find the reason for this and how can we suppress the second msg prompt

jsfiddle ( exemplary view )

Answer 1

You use CSS only "extends" the functionality for the title, but the original title attribute still gets the rendering.

You might want to change it to data-title , which by default is not displayed by the browser, and instead change the CSS to content: attr(data-title) .

Also remove the header of the inner span, it is redundant and unnecessary.

Example

Answer 2

Here is the solution, so I am sharing here, it can help someone else: I have applied the same approach as suggested in most of the answers, i.e.

You might want to change it to a data name that does not appear in the default browser and change CSS to content: attr (data-title) to use this instead.

With the add-in above, I made the changes below.

After loading the page dynamically follow below

• add the data-title attribute by copying the contents of the title attribute

• then remove the title attribute

Below is a sample code

 $(document).ready(function(){ $(".tooltip").hover(function(){ $(this).attr("data-title", $(this).attr("title")); $(this).removeAttr("title"); }, function(){ $(this).attr("title", $(this).attr("data-title")); $(this).removeAttr("data-title"); }); }); 

JsFiddle link

Answer 3

Use the data-title attribute instead of title .

 <a href="#" data-title="This is some information for our tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span></a> 

And, extract the contents of this attribute into your css.

 content: attr(data-title); 

EDIT:

If you have no control over the title attribute, you can remove them at run time using JavaScript.

 var tooltipElements = Array.prototype.slice.call(document.querySelectorAll('.tooltip')); tooltipElements.forEach(replaceTitleWithDataTitle); function replaceTitleWithDataTitle(element) { var title = element.getAttribute('title'); element.removeAttribute('title'); element.setAttribute('data-title', title || ''); } 

Answer 4

If you want to keep the header (without going to the data name forever), you can use javascript to delete and reset the attribute on hover. See jquery: hide title attribute but not remove it

Or much easier to use: aria-label

 <a href="#" aria-label="This is some information for our tooltip." class="tooltip"> <span>CSS3 Tooltip</span> </a>