11

次のコードを使用します。

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

abbr タグのタイトルのスタイルを設定できますか? カスタム ツールチップの代わりにタイトルを使用できますか?

4

4 に答える 4

27

実際、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 タグの右上に絶対配置の疑似要素が追加されます。

于 2012-07-08T12:20:19.720 に答える
8

ポップアップする実際のテキストのスタイルを設定するつもりなら、CSS でスタイルを設定することはできません。それはブラウザ固有です。Javascript ベースtooltipsは、この動作をより細かく制御できるため、私がそれを処理する方法です。

于 2009-11-05T18:50:08.910 に答える
4

私は似たようなものを探していて、このリンクに基づいて、次の代替案を思いつきました (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);
}
于 2013-09-15T22:19:32.690 に答える
1

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

プログラムで任意のタグにJQueryのものを適用することで、この制限を回避できます。これにより、 が表示され、その内容はそれを呼び出したタグの と同じように読み取られます。abbrdivtitle

于 2009-11-05T18:51:17.660 に答える