Po dostosowaniu css dla podpowiedzi, jest wyświetlana dwukrotnie:

Question

Po dostosowaniu CSS do podpowiedzi etykiety, wyświetla się dwa razy na ekranie. Poniżej przedstawiono rodzaj implementacji. Wyjście

<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; 
} 

Próbka:

Pomóż mi znaleźć przyczynę tego i jak możemy tłumić 2. etykietka MSG

jsfiddle (sample view)

Answer 1

Używasz CSS tylko "rozszerza" funkcjonalność ty dla tytułu, ale oryginalny atrybut tytułu nadal jest renderowany.

Możesz chcieć go zmienić na data-title, który domyślnie nie jest renderowany przez przeglądarkę, i zmień CSS na content: attr(data-title), aby użyć go zamiast tego.

Usuń również tytuł wewnętrznej przęsła, jest zbędny i niepotrzebny.

Example

Answer 2

Zastosowanie data-title atrybut zamiast title.

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

I, wyodrębnij zawartość tego atrybutu w twoim css.

content: attr(data-title); 

EDIT:

Jeśli nie masz kontroli nad atrybutu title, można je usunąć w czasie wykonywania przy użyciu 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 3

Jeśli chcesz zachować tytuł (nie włączeniu do danych-tytule stałe) można użyć javascript, aby usunąć i przywrócić atrybut przy aktywowaniu. Patrz: jquery: hide title attribute but not remove it

lub znacznie łatwiejsze zastosowanie: aria-label

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

Answer 4

Oto rozwiązanie, więc dzielę się tutaj, to może pomóc komuś innemu: zastosowałem samo podejście co jest sugerowane w większości z odpowiedzią tj

Możecie chcę go zmienić na tytuł-danych, które nie są renderowane przez przeglądarkę domyślnie i zmienić CSS treści: attr (dane-tytuł) do używać tego ins tead.

Z dodatkiem do powyższych zrobiłem poniżej zmiany.

Po Ładowanie strony dynamicznie zrobić poniżej

• doda data-title atrybutu poprzez kopiowanie zawartości atrybutu title

• następnie usunąć atrybut

Poniżej title jest przykładowy kod

$(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