Bagaimana cara menambahkan tip alat ke elemen rentang?

364

Dalam kode berikut, saya ingin tip alat muncul ketika pengguna mengarahkan span, bagaimana saya melakukannya? Saya tidak ingin menggunakan tautan apa pun.

<span> text </span>

html css

— MichaelICE
sumber

677

Inilah cara sederhana dan terintegrasi:

<span title="My tip">text</span>

Itu memberi Anda tooltips teks biasa. Jika Anda ingin tooltips yang kaya, dengan HTML berformat di dalamnya, Anda harus menggunakan perpustakaan untuk melakukannya. Untungnya ada banyak dari itu .

— RichieHindle
sumber

1

Tetapi apakah ini berfungsi jika tidak ada teks dalam rentang tersebut? Katakan misalnya rentang kosong dengan gambar-bg?

— Augiwan

1

@UGS: Apakah Anda yakin elemen Anda adalah ukuran yang Anda pikirkan? Coba berikan latar belakang merah muda seperti milik saya. :-)

— RichieHindle

Terima kasih banyak.! Tapi saya hanya menggunakan tipsy.js dan terlihat lebih baik dari yang saya inginkan. : D Dan artikel ini membantu dalam kebingungan saya: htmlgoodies.com/tutorials/html_401/article.php/3479661/... di mana dikatakan bahwa tooltip berfungsi untuk "teks"

— Augiwan

1

Hai, Dapatkah seseorang mengklarifikasi apakah ini standar dalam beberapa / semua rasa HTML?

— Jonathan dos Santos

@jonathan: Sudah standar sejak setidaknya HTML4: w3.org/TR/html4/struct/global.html#adef-title

— RichieHindle

97

Tooltips Kustom dengan CSS murni - tidak perlu JavaScript:

Contoh di sini (dengan kode) / Contoh layar penuh

Sebagai alternatif untuk titletooltips atribut default , Anda dapat membuat tooltips CSS kustom Anda menggunakan :before/ :after elemen pseudo dan data-*atribut HTML5 .

Menggunakan CSS yang disediakan, Anda bisa menambahkan tooltip ke elemen menggunakan data-tooltipatribut.

Anda juga dapat mengontrol posisi tooltip kustom menggunakan data-tooltip-positionatribut (nilai yang diterima: top/ right/ bottom/ left).

Misalnya, berikut ini akan menambahkan tooltop yang diposisikan di bagian bawah elemen span.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

masukkan deskripsi gambar di sini

Bagaimana cara kerjanya?

Anda dapat menampilkan tooltips khusus dengan elemen pseudo dengan mengambil nilai atribut khusus menggunakan attr()fungsi.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

Dalam hal memposisikan tooltip, cukup gunakan pemilih atribut dan ubah penempatan berdasarkan nilai atribut.

Contoh di sini (dengan kode) / Contoh layar penuh

CSS lengkap digunakan dalam contoh - sesuaikan ini dengan kebutuhan Anda.

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

— Josh Crozier
sumber

2

@SearchForKnowledge Benarkah? Saya akan membahasnya nanti. Terima kasih.

— Josh Crozier

5

Ya saya baru saja mengujinya dan juga tidak terkejut itu tidak berhasil. IE lama yang baik! ;)

— SearchForKnowledge

@JoshCrozier, itu sangat membantu

— JIBIN BJ

20

Di sebagian besar peramban, atribut judul akan dirender sebagai tooltip, dan umumnya fleksibel untuk jenis elemen apa yang akan bekerja dengannya.

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

Semua itu akan memberikan tooltips di sebagian besar setiap browser.

— Brian Arnold Sinclair
sumber

7

Untuk tip alat dasar, Anda ingin:

<span title="This is my tooltip"> Hover on me to see tooltip! </span>

Luaskan cuplikan

— Abk
sumber

4

yang "title"atribut akan digunakan sebagai teks untuk tooltip oleh browser, jika Anda ingin menerapkan gaya untuk itu mempertimbangkan untuk menggunakan beberapa plugin

— Rony
sumber