ツールヒントのCSSをカスタマイズした後、2回表示されます

Question

CSSをツールチップmsgにカスタマイズした後、画面に2回表示されます。以下は、提供される実装の種類です。

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

サンプル出力：

jsfiddle（sample view）

Answer 1

をこの原因を見つけるために私を助けて、どのように我々は第二ツールチップMSGを抑制することができます

あなたはCSSを使用しているにすぎません。タイトルのためのtyが、元のtitle属性はまだレンダリングされています。

デフォルトではブラウザによってレンダリングされないdata-titleに変更し、その代わりにCSSをcontent: attr(data-title)に変更して使用することができます。

また、内側のスパンのタイトルを削除すると、重複して不要になります。

Example

Answer 2

使用data-title属性の代わりに、title。

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

あなたのCSSでこの属性の内容を抽出してください。

content: attr(data-title); 

EDIT：あなたはtitle属性を制御することはできません場合は

、あなたは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

あなたは（永久にデータ-タイトルにスイッチングしていない）のタイトルを保持したい場合は、ホバー上の属性を削除し、リセットするためにJavaScriptを使用することができます。 参照：jquery: hide title attribute but not remove it

または、はるかに簡単に使用：ARIAラベル

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

Answer 4

ここでは、ソリューションですので、私はここで共有しています、それは他の誰かを助けるかもしれない： 私はほとんどで提案されているものと同じアプローチを適用ATTR（データタイトル） 使用インへ：あなたは、デフォルトで ブラウザによってレンダリングされていないデータ、タイトルに変更したい、とコンテンツにCSSを変更する場合があります

すなわち答えのおじいちゃん。

上記のアドオンを使用して、以下の変更を行いました。動的その後、title属性以下

サンプルコード

で削除 title属性

の内容をコピーしてdata-title属性を追加

• 下にないページの読み込み後

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