web-dev-qa-db-ja.com

タイトルのスタイルを設定することはできますか？ （そしてCSSまたはjsで？）

titleのスタイルを設定することは可能かどうか疑問に思いました：

<a href="#" title="This is a title">Hello</a>

スタイリングの質問には2つの側面があります。

  • テキストフォーマット /エンコーディング（これは可能だと思いますSO質問でそれを行います*）。
  • ツールチップのスタイリング、大きくできますか？他の色？等.

そして、私が持っている他の問題は、どのようにあなたがタイトルを「指す」ですか？

  • から[〜＃〜] css [〜＃〜]
  • からJavascript/jQuery

前もって感謝します！

*テキストのフォーマット/エンコーディングによる説明：

alt text

javascripthtmlcssstyling
18
Trufa

HTMLエンティティを介してタイトル属性に改行を入れて、テキストの改行を強制することができます。最近のほとんどのブラウザはこれをサポートしています。これは、ブラウザのネイティブツールチップ表示に加えることができる唯一の変更です。

<a href="real_link" title="check&#13;&#10;this&#13;&#10;out">foo bar</a>

上記の例を参照してください Webページ上 。

他の人が指摘しているように、スタイリング可能なカスタムHTMLツールチップを作成するためのさまざまなJSライブラリ用のプラグインが多数存在します。これが トップヒット Google検索「jquerytooltipplugin」で、そのようなプラグインを10個レビューしています。

14
Phrogz

:afterおよび:hover疑似クラスを使用して、CSSのみのツールチップを作成できます。

<a href="#" class="class-with-tooltip">Link</a>

.class-with-tooltip:hover:after{
    content: 'Tooltip';
    position: absolute;
    padding: 5px;
    border: 1px solid gray;
    background: whitesmoke;
    font-size: 14px;
}

これが古いブラウザでどのように機能するかはわかりませんが、すべての主要なブラウザで機能します。

position: absolute;は、生成されたコンテンツが要素の後にマークアップをプッシュするのを防ぐために必要です。

9
Shimon Rachlenko

ツールチップポップアップはOSネイティブのものであるため、CSSでは不可能ですが、このチュートリアル（記事+スクリーンキャスト+ソースコード）をご覧ください： http://net.tutsplus.com/articles/ news/you-still-cant-create-a-jquery-plugin / それはあなたが求めていることを正確に実行するあなた自身のカスタムjQueryプラグインをロールする方法を説明します。

3
mingos

デフォルトのtitle属性でストレートCSSを使用することはできませんが、利用可能な多くのJQueryツールチッププラグインを使用して、新しいツールチップやCSSでスタイルを設定できるものを作成できます。

http://www.1stwebdesigner.com/freebies/stylish-jquery-tooltip-plugins-webdesign/

1
Daniel A. White

JQueryでそれを行うことができますが、プラグインは必要ありません。

要素にクラスを割り当て、ドキュメントの準備ができたら、そのクラスのtitle属性を設定します。例えば...

$(".className").attr("title", "Your title here.");
0
Alan M.