次のコードを使用します。
<abbr title="World Health Organization">WHO</abbr>
abbr タグのタイトルのスタイルを設定できますか? カスタム ツールチップの代わりにタイトルを使用できますか?
実際、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);
}
これにより、abbr タグにカーソルを合わせると、タイトル内の属性 content を使用して、abbr タグの右上に絶対配置の疑似要素が追加されます。
ポップアップする実際のテキストのスタイルを設定するつもりなら、CSS でスタイルを設定することはできません。それはブラウザ固有です。Javascript ベースtooltips
は、この動作をより細かく制御できるため、私がそれを処理する方法です。
私は似たようなものを探していて、このリンクに基づいて、次の代替案を思いつきました (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:
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(name);
}
短縮バージョンの表示方法をスタイル設定できます。この場合は「WHO」です。ただし、ブラウザ/OS によって制御されるため、ポップアップ ボックスが表示される方法ではありません。
プログラムで任意のタグにJQueryのものを適用することで、この制限を回避できます。これにより、 が表示され、その内容はそれを呼び出したタグの と同じように読み取られます。abbr
div
title