例：

<a href="example.com" title="My site"> Link </a>

ブラウザの「title」属性の表示を変更するにはどうすればよいですか。デフォルトでは、背景が黄色でフォントが小さいだけです。大きくして背景色を変えたいです。

タイトル属性のスタイルを設定するCSSの方法はありますか？

これを行う方法の例を次に示します。

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

実際には純粋なCSSソリューションがあり、CSS attr式、生成されたコンテンツ、および属性セレクターのみを必要とするようです（これはIE8までさかのぼって動作することを示唆しています）：

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

ソース：https : //jsfiddle.net/z42r2vv0/2/

@ViROscarからの入力で更新：上記の例では「title」属性を使用しましたが、特定の属性を使用する必要はないことに注意してください。CSSを利用できないユーザーがコンテンツにアクセスできる可能性があるため、実際には「alt」属性を使用することをお勧めします。

もう一度更新します。「title」属性は基本的に「tooltip」属性を意味するようになったため、コードを変更していません。ホバー時にのみアクセスできるフィールド内の重要なテキストを非表示にすることはおそらくお勧めできませんが、このテキストをアクセシブルにすることに関心があると、「aria-label」属性が最適な場所のようです。https：//developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

実際のtitle属性にスタイルを設定することはできません

title属性のテキストの表示方法はブラウザによって定義され、ブラウザごとに異なります。title属性に基づいてブラウザが表示するツールチップにスタイルを適用することはできません。

ただし、他の属性を使用して非常によく似たものを作成できます。

あなたは、CSSやカスタム属性（例で擬似ツールチップを作ることができますdata-title）

これには、data-title属性を使用します。data-*属性は、DOM要素/ HTMLにカスタムデータを格納するためのメソッドです。それらにアクセスするには複数の方法があります。重要なのは、CSSで選択できることです。

CSSを使用してdata-title属性を持つ要素を選択できる場合、CSSを使用して、を使用して属性の値を含む:after（または:before）を作成できます。 contentattr()

スタイル付きツールチップの例

より大きく、背景色が異なる（質問のリクエストごと）：

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

より精巧なスタイリング（このブログ投稿から採用）：

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

既知の問題点

実際のtitleツールチップとは異なり、上記のCSSによって生成されたツールチップは、必ずしもページに表示されることが保証されているわけではありません（つまり、表示領域の外側にある可能性があります）。一方、現在のウィンドウ内にあることが保証されていますが、実際のツールチップには当てはまりません。

さらに、疑似ツールチップは、マウスがその要素上にある場所ではなく、疑似ツールチップを持つ要素に相対的に配置されます。疑似ツールチップが表示される場所を微調整したい場合があります。要素に対して既知の場所に表示されることは、状況によってはメリットにもデメリットにもなります。

あなたは使用することはできません:beforeか:afterコンテナーない要素に

この回答には、「入力フィールドで：beforeまたは：after疑似要素を使用できますか？」に対する適切な説明があります。

効果的に、あなたのような要素に直接このメソッドを使用することができないことを、この意味<input type="text"/>、<textarea/>、<img>、など簡単な解決策はコンテナではありません要素をラップすることです<span>か<div>と、コンテナ上の擬似ツールチップを持っています。

<span>非コンテナ要素のラップで擬似ツールチップを使用する例：

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{上にリンクされたブログ投稿のコード（私が最初にそれを盗用した回答で最初に見たもの）から、data-*属性の代わりに属性を使用することは明らかでしたtitle。そうすることは、その（現在は削除されている）回答に関するsnostormのコメントでも提案されました。}

CSSはツールチップの外観を変更できません。ブラウザ/ OSに依存します。別のものが必要な場合は、デフォルトのツールチップの代わりに要素にカーソルを合わせると、JavaScriptを使用してマークアップを生成する必要があります。

20行のJavaScriptソリューションをここに投稿すると思いました。完璧ではありませんが、ツールチップから何を必要とするかによっては便利な場合があります。

いつ使うか

• TITLE属性が定義されたすべてのHTML要素のツールチップを自動的にスタイルします（これには、将来ドキュメントに動的に追加される要素が含まれます）
• すべてのツールチップにJavaScript / HTMLの変更やハッキングは必要ありません（TITLE属性のみ、意味的に明確）
• 非常に軽い（約300バイトがgzip圧縮されて縮小されます）
• 非常に基本的なスタイル可能なツールチップのみが必要です

使用しない場合

• jQueryが必要なので、jQueryを使用しない場合は使用しないでください
• 両方にツールチップがあるネストされた要素のサポートが悪い
• 画面上に同時に複数のツールチップが必要です
• しばらくするとツールチップが消える必要があります

コード

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

DOMの準備が整う前にこのコードを実行しても機能するはずです（DOMの準備が整うまでツールチップは表示されません）。

カスタマイズ

var2行目の宣言を変更して、少しカスタマイズすることができます。

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

スタイル

これで、次のCSSを使用してツールチップをスタイルできます。

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

私はここで答えを見つけました：http : //www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

私自身のコードはこのようになり、属性名を変更しました。同じテキストに対して2つのポップアップを持つ属性のタイトル名を維持すると、もう1つの変更は、ホバリング時のテキストが露出したテキストの下に表示されることです。

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(glose);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

カスタムツールチップパターンのjsfiddleはこちら

CSSポジショニングとpseduoクラスセレクターに基づいています

疑似クラスのクロスブラウザーサポートについては、MDNドキュメントを確認してください

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

ネイティブツールチップはスタイル設定できません。

とはいえ、要素をホバーしているときにスタイルのフローティングレイヤーを表示するライブラリを使用できます（ネイティブツールチップの代わりにそれらを抑制し、コードを変更する必要がほとんどありません）。

デフォルトのブラウザツールチップのスタイルを設定することはできません。ただし、JavaScriptを使用して独自のカスタムHTMLツールチップを作成できます。

a[title="My site"] {
    color: red;
}

これは、たとえば、追加したい属性でも機能します。

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

それが動作するのを見てください：http : //jsfiddle.net/vpYWE/1/