次のコードがあり、'title' 属性のスタイルをカスタマイズしたいと考えています。それを行う方法はありますか。前もって感謝します。
<td title="Sample Title">test</td>
これは何年も前には不可能だったかもしれませんが、今では Title 属性のスタイルを設定できます。ここを参照してください。これは IE7 以降、Safari 3 以降、Firefox 2.0 以降で動作するはずです。
独自のデザインに合わせて、カスタム スタイルと配置が必要になる場合があります。
このリンクが無効にならないようにするために、この記事で推奨される title 属性のスタイルを設定するコードは次のとおりです。
<div title="Tooltip text for first div"></div> <div title="Tooltip text for second div"></div>
div:before{ content:attr(title); display:none; }
div:hover::before{ width:200px; display:block; background:yellow; border:1px solid black; padding:8px; margin:25px 0 0 10px; }
div:hover{ z-index:10; position:relative; }
つまり、title
属性のスタイルを設定することはできません。表示されたときにタイトルがどのようにレンダリングされるかは、ブラウザー次第です。
ただし、jQuery は、必要なソリューションを提供する JavaScript の代替手段を提供します。
いいえ。ブラウザによってタイトル ツールチップの表示が異なります。CSS を使用してスタイルを設定する方法はありません。スタイルを設定する必要がある場合は、jQuery を使用してカスタム ツールチップを表示するなど、代替手段を探す必要があります。
「タイトル」属性は、通常、ツールチップとしてブラウザーでサポートされています。そのポップアップをフォーマットする CSS の標準的な方法はありません。
特別にフォーマットされたツールチップが必要な場合は、 onmouseover() 属性を使用して自分でポップアップを生成することをお勧めします。他の人が指摘したように、コードにサポートを追加したい場合は、jQuery を使用できます。jQuery より軽量なソリューションについては、SkinnyTipを参照してください。