abbrタグのタイトルをスタイリングできますか？

Question

は、次のコードを取る：

<abbr title="World Health Organization">WHO</abbr> 

我々は略称タグのタイトルのスタイルを設定することはできますか？そのため、カスタムのツールチップの代わりにタイトルを使用できますか？

Answer 1

ポップアップする実際のテキストをスタイルすることを意味する場合は、CSSでスタイルを変更することはできません。ブラウザ固有です。 Javascriptベースのtooltipsは、この動作をより詳細に制御できるため、これを処理する方法になります。

Answer 2

短縮版が表示される方法をスタイルすることができます。この場合は「WHO」です。しかし、ブラウザ/ OSによって制御されるので、ポップアップボックスが表示される方法ではありません。

あなたはプログラム的にどのabbrタグにいくつかのJQueryものを適用することによって、この制限を回避することができます - これは、内容がそれを呼ばれるタグのtitleと同じように読んでいましたのdivを表示していました。

Answer 3

実際、Alex Mcpの答えは間違っています。最近のブラウザでは、これをCSSで行うことは可能です。ただし、JavaScriptを使用している古いブラウザではフォールバックが使用される可能性があります。

abbr { 
    position: relative; 
} 

abbr:hover::after { 
    position: absolute; 
    bottom: 100%; 
    left: 100%; 
    display: block; 
    padding: 1em; 
    background: yellow; 
    content: attr(title); 
} 

これは略称タグがホバーされたタイトル内の属性の内容を使用して略称タグの絶対位置擬似要素右上を追加します。

Answer 4

私は似た何かを探して、次の代替を思い付いたthis linkに基づいて、（私はそれをクリックしたときにMac上のFirefox、SafariとChromeでテストしたが、IE 7〜10で動作します）：

HTML ：

<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr> 

のjQuery：

$('[title]').each(function() { 
    var mytitle = $(this); 
    mytitle.data('title',mytitle.attr('title')); // get title attribute value 
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute 
    mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip 
}); 

CSS：Firefoxの上のFYI

abbr { 
    position: relative; 
} 
abbr:hover::after { 
    position: absolute; 
    bottom: 100%; 
    left: 100%; 
    display: block; 
    padding: 1em; 
    background: yellow; 
    content: attr(name); 
}