Menggunakan HTML Attribute Value di CSS

Normalnya, hubungan CSS dengan HTML sebatas CSS memberi style pada elemen HTML yang cocok dengan CSS selectors yang digunakan dan CSS tidak mengetahui isi dari HTML tersebut. Tetapi ada cara agar CSS bisa mengetahui data di HTML, bahkan menggunakannya di CSS, kita dapat menggunakan fungsi attr(). Benar attr() adalah fungsi yang dapat dijalankan di CSS, what a time to be alive.

<!-- HTML -->
<button data-tooltip=" | Text ini akan muncul saat mouse hover">Button</button>

button:hover::after {
    content: attr(data-tooltip);
}