Contoh:

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

Bagaimana cara mengubah presentasi atribut "title" di browser ?. Secara default, itu hanya memiliki latar belakang kuning dan font kecil. Saya ingin membuatnya lebih besar dan mengubah warna latar belakang.

Apakah ada cara CSS untuk mengatur atribut title?

Berikut adalah contoh cara melakukannya:

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>

Tampaknya sebenarnya ada solusi CSS murni, hanya membutuhkan attrekspresi css , konten yang dihasilkan dan pemilih atribut (yang menunjukkan bahwa ia bekerja sejauh IE8):

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

Sumber: https://jsfiddle.net/z42r2vv0/2/

perbarui w / input dari @ViROscar: harap dicatat bahwa tidak perlu menggunakan atribut tertentu, meskipun saya telah menggunakan atribut "title" pada contoh di atas; sebenarnya rekomendasi saya adalah menggunakan atribut "alt", karena ada kemungkinan konten akan dapat diakses oleh pengguna yang tidak dapat memanfaatkan CSS.

perbarui lagi saya tidak mengubah kode karena atribut "title" pada dasarnya berarti atribut "tooltip", dan mungkin bukan ide yang baik untuk menyembunyikan teks penting di dalam bidang yang hanya dapat diakses di hover, tetapi jika Anda tertarik untuk membuat teks ini dapat diakses, atribut "aria-label" tampaknya merupakan tempat terbaik untuk itu: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Anda tidak dapat mendesain titleatribut yang sebenarnya

Bagaimana teks dalam titleatribut ditampilkan ditentukan oleh browser dan bervariasi dari browser ke browser. Halaman web tidak mungkin menerapkan gaya apa pun pada tooltip yang ditampilkan browser berdasarkan titleatribut.

Namun, Anda dapat membuat sesuatu yang sangat mirip menggunakan atribut lain.

Anda dapat membuat pseudo-tooltip dengan CSS dan atribut khusus (mis. data-title)

Untuk ini, saya akan menggunakan data-titleatribut. data-*atribut adalah metode untuk menyimpan data khusus dalam elemen DOM / HTML. Ada beberapa cara untuk mengaksesnya . Yang penting, mereka dapat dipilih oleh CSS.

Karena Anda dapat menggunakan CSS untuk memilih elemen dengan data-titleatribut, Anda kemudian dapat menggunakan CSS untuk membuat :after(atau :before) contentyang berisi nilai dari atribut yang digunakan attr().

Contoh tooltip gaya

Lebih besar dan dengan warna latar belakang yang berbeda (sesuai permintaan pertanyaan):

[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

Gaya yang lebih rumit (diadaptasi dari posting blog ini ):

[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

Masalah Dikenal

Tidak seperti titletooltip nyata , tooltip yang dihasilkan oleh CSS di atas tidak, tentu, dijamin akan terlihat pada halaman (yaitu mungkin di luar area yang terlihat). Di sisi lain, itu dijamin berada di dalam jendela saat ini, yang bukan kasus tooltip yang sebenarnya.

Selain itu, pseudo-tooltip diposisikan relatif terhadap elemen yang memiliki pseudo-tooltip daripada relatif di mana mouse berada pada elemen tersebut. Anda mungkin ingin menyempurnakan di mana pseudo-tooltip ditampilkan. Setelah itu muncul di lokasi yang diketahui relatif terhadap elemen dapat menjadi manfaat atau kelemahan, tergantung pada situasinya.

Anda tidak dapat menggunakan :beforeatau :afterpada elemen yang bukan wadah

Ada penjelasan yang baik dalam jawaban ini untuk "Bisakah saya menggunakan: sebelum atau: setelah elemen semu pada bidang input?"

Efektif, ini berarti bahwa Anda tidak dapat menggunakan metode ini langsung pada unsur-unsur seperti <input type="text"/>, <textarea/>, <img>, dll solusi mudah adalah untuk membungkus elemen yang tidak wadah dalam <span>atau <div>dan memiliki pseudo-tooltip pada wadah.

Contoh menggunakan pseudo-tooltip pada <span>pembungkus elemen non-kontainer:

[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/>

^{Dari kode di posting blog yang ditautkan di atas (yang pertama kali saya lihat di jawaban di sini yang menjiplaknya), tampak jelas bagi saya untuk menggunakan data-*atribut daripada titleatribut. Melakukan hal itu juga disarankan dalam komentar oleh snostorm tentang jawaban (sekarang dihapus) itu.}

CSS tidak dapat mengubah tampilan tooltip. Ini tergantung pada browser / OS. Jika Anda menginginkan sesuatu yang berbeda, Anda harus menggunakan Javascript untuk menghasilkan markup ketika Anda mengarahkan kursor ke elemen, bukan tooltip default.

Saya pikir saya akan mengirim solusi JavaScript 20 baris saya di sini. Ini tidak sempurna, tetapi mungkin berguna untuk beberapa tergantung pada apa yang Anda butuhkan dari tooltips Anda.

Kapan menggunakannya

• Secara otomatis gaya tooltip untuk semua elemen HTML dengan TITLEatribut yang ditentukan (ini termasuk elemen yang ditambahkan secara dinamis ke dokumen di masa depan)
• Tidak ada perubahan Javascript / HTML atau peretasan yang diperlukan untuk setiap tooltip (hanya TITLEatribut, jelas semantik)
• Sangat ringan (menambah sekitar 300 byte gzip dan diperkecil)
• Anda hanya menginginkan tooltip gaya yang sangat mendasar

Kapan TIDAK digunakan

• Membutuhkan jQuery, jadi jangan gunakan jika Anda tidak menggunakan jQuery
• Dukungan buruk untuk elemen bersarang yang keduanya memiliki tooltips
• Anda membutuhkan lebih dari satu tooltip di layar secara bersamaan
• Anda perlu tooltip menghilang setelah beberapa waktu

Kode

// 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); }
}());

Tempel di mana saja, itu akan berfungsi bahkan ketika Anda menjalankan kode ini sebelum DOM siap (itu tidak akan menunjukkan tooltips Anda sampai DOM siap).

Sesuaikan

Anda dapat mengubah vardeklarasi pada baris kedua untuk menyesuaikannya sedikit.

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

Gaya

Anda sekarang dapat menata tooltips Anda menggunakan CSS berikut:

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

Saya telah menemukan jawabannya di sini: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

kode saya sendiri berjalan seperti ini, saya telah mengubah nama atribut, jika Anda mempertahankan nama judul untuk atribut Anda akhirnya memiliki dua popup untuk teks yang sama, perubahan lain adalah bahwa teks saya pada layar melayang di bawah teks yang terbuka.

.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 untuk pola tooltip kustom ada di Sini

Ini didasarkan pada Pemosisian CSS dan pemilih kelas pseduo

Periksa MDN docs untuk dukungan lintas-browser dari kelas pseudo

    <!-- 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;
}

Tips asli tidak dapat ditata.

Yang sedang berkata, Anda bisa menggunakan beberapa pustaka yang akan menunjukkan gaya lapisan mengambang ketika elemen sedang melayang (bukan tooltips asli, dan menekan mereka) membutuhkan sedikit atau tidak ada modifikasi kode ...

Anda tidak dapat mengatur tooltip browser default. Tetapi Anda dapat menggunakan javascript untuk membuat tooltips HTML kustom Anda sendiri.

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

Ini juga berfungsi dengan atribut apa pun yang ingin Anda tambahkan misalnya:

HTML

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

CSS

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

Lihat berhasil di: http://jsfiddle.net/vpYWE/1/