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="text""><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.