Saat ini saya menambahkan tooltips verbose ke situs kami, dan saya ingin (tanpa harus menggunakan plugin jQuery jagoan, saya tahu ada banyak!) Untuk menggunakan carriage return untuk memformat tooltip.
Untuk menambahkan tip saya menggunakan title
atribut. Saya telah melihat-lihat situs yang biasa dan menggunakan templat dasar:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
Saya sudah mencoba mengganti ?
dengan:
<br />
&013; /
\r\n
Environment.NewLine
(Saya menggunakan C #)
Tidak satu pun di atas berfungsi. Apa itu mungkin?
. Kemudian letakkan spasi di tempat yang Anda inginkan. Anda mungkin juga perlu menambahkan banyak
karakter sebelum spasi Anda (jeda baris).Jawaban:
Sangat sederhana sehingga Anda akan menendang diri sendiri ... cukup tekan enter!
Firefox tidak akan menampilkan tooltip multi-line sama sekali - itu akan menggantikan baris baru dengan apa-apa.
sumber
\n
,\u000A
dan\x0A
.\x0A
(byte) adalah kode karakter yang sesuai dengan baris baru. Sama untuk\u000A
(unicode).\n
juga baris baru.title
atribut di Firefox dan Chrome, dan mereka hanya disajikan secara harfiah di tooltip. Setelah itu, saya menyadari Anda mungkin menggunakan sintaks itu sebagai cara untuk mengkomunikasikan karakter mana (bukan urutan melarikan diri) yang harus digunakan. Komentar saya adalah untuk menghemat waktu orang lain dengan memperingatkan mereka untuk tidak mencoba menempatkan urutan pelarian Anda dalam HTML mereka sehingga mereka tidak membuang waktu seperti saya.The spesifikasi terbaru memungkinkan karakter line feed, sehingga satu baris sederhana dalam atribut atau badan
(catatan bahwa karakter#
dan;
diperlukan) adalah OK.sumber
dan
.
tidak akan menghormati "jeda baris" yang dimaksud dalam versi chrome 50.0.2661.94 (64-bit).
bekerja dengan baik di versi chrome, firefox dan opera saat ini (semuanya untuk Ubuntu 64-bit) dan internet explorer versi 11.0 dan beberapa perubahan pada windows.Coba karakter 10. Namun tidak akan berfungsi di Firefox. :(
http://modp.com/wiki/htmltitletooltips
Memperbarui:
Pada Januari 2015 Firefox tidak mendukung penggunaan
untuk menyisipkan garis istirahat dalamtitle
atribut HTML . Lihat contoh cuplikan di bawah ini.sumber
dalamtitle
atribut untuk memasukkan jeda baris.<title>
. Adakah yang lebih sukses dengan itu? Mencoba kode char menyebutkan di atas / di bawah ini, sepertinya tidak ada yang berhasil.Menguji ini di IE, Chrome, Safari, Firefox (versi terbaru 2012-11-27):
Bekerja di semua dari mereka ...
sumber
adalah linefeed unix sama seperti itu linefeed windows. Demikian pula,
baris baru untuk kedua platform. The spek Menentukan linefeed (LF) arang yang tentu saja
pada kedua (semua?) Platform.LF
(yang merupakan linefeed standar antar protokol dan alat),CR
hanya digunakan oleh Mac lama (dan platform tidak jelas lainnya) dan tampaknya tidak pada tempatnya.
, meskipun tampaknya
berfungsi dalam banyak situasi juga.Juga perlu disebutkan, jika Anda mengatur atribut judul dengan Javascript seperti ini:
divElement.setAttribute("title", "Line one Line two");
Itu tidak akan berhasil. Anda harus mengganti ASCII desimal 10 menjadi ASCII heksadesimal A dengan cara itu lolos dengan Javascript. Seperti ini:
divElement.setAttribute("title", "Line one\x0ALine two");
sumber
\n
berarti kode char 10 pula)Pada Firefox 12 mereka sekarang mendukung jeda baris menggunakan entitas HTML umpan baris:
Ini berfungsi di IE dan benar sesuai dengan spesifikasi HTML5 untuk atribut title .
sumber
Jika Anda menggunakan jQuery:
akan bekerja.
diuji di IE-9: bekerja.
sumber
Sebagai kontribusi terhadap

solusi, kami juga dapat menggunakan	
tab jika Anda perlu melakukan sesuatu seperti ini.Demo
sumber
akan bekerja di semua browser utama (termasuk IE)sumber
Saya tahu saya terlambat ke pesta, tetapi bagi mereka yang hanya ingin melihat ini berfungsi, berikut adalah demo: http://jsfiddle.net/rzea/vsp6840b/3/
HTML yang digunakan:
sumber
Saya tidak percaya itu. Firefox 2 memangkas judul tautan yang panjang dan seharusnya hanya digunakan untuk menyampaikan sedikit teks bantuan. Jika Anda membutuhkan lebih banyak teks penjelasan, saya sarankan teks itu termasuk dalam paragraf yang terkait dengan tautan. Anda kemudian dapat menambahkan kode javascript tooltip untuk menyembunyikan paragraf tersebut dan menunjukkannya sebagai tooltips pada hover. Itu taruhan terbaik Anda untuk membuatnya bekerja lintas-browser IMO.
sumber

<----- Ini adalah teks yang diperlukan untuk memasukkan Carry Return.sumber
Pada Chrome 16, dan mungkin versi sebelumnya, Anda dapat menggunakan "\ n". Sebagai sidenote, "\ t" juga berfungsi
sumber
Kami memiliki persyaratan di mana kami perlu menguji semua ini, inilah yang ingin saya bagikan
Biola
sumber
Di Chrome 79,
tidak berfungsi lagi.Saya berhasil dengan:
Ini berfungsi di semua browser utama.
sumber
Sedangkan untuk siapa yang
tidak bekerja, Anda harus menata elemen di mana garis terlihat sebagai:white-space: pre-line;
Dirujuk dari Jawaban ini: https://stackoverflow.com/a/17172412/1460591
sumber
a[title]
?Gunakan ini saja:
Anda dapat menambahkan baris baru pada judul dengan menggunakan ini


.sumber
Cukup gunakan JavaScript. Kemudian kompatibel dengan sebagian besar dan lebih lama browser. Gunakan urutan jalan keluar \ n untuk baris baru.
sumber
Ini

akan berfungsi jika Anda hanya menggunakan atribut judul sederhana.pada bootstrap popovers, cukup gunakan
data-html="true"
dan gunakan html didata-content
atribut.sumber
Dari informasi yang tersedia tentang aksesibilitas dan penggunaan tooltips yang membuatnya lebih besar dengan penggunaan CR atau line break dihargai, fakta bahwa berbagai browser tidak dapat / tidak akan menyetujui dasar-dasar menunjukkan bahwa mereka tidak terlalu peduli tentang aksesibilitas.
sumber
Menurut artikel ini di situs web w3c :
Ini berarti (setidaknya) CR dan LF tidak akan berfungsi di dalam atribut title. Saya sarankan Anda menggunakan plugin tooltip. Sebagian besar plugin ini memungkinkan HTML sewenang-wenang ditampilkan sebagai tooltip elemen.
sumber
Tooltips yang tampak lebih bagus dapat dibuat secara manual, dan dapat menyertakan pemformatan HTML.
Ini diambil dari posting w3schools di ini. Eksperimen dengan kode di atas di sini .
sumber
Sintaks Razor
Dalam kasus ASP.NET MVC Anda hanya dapat menyimpan judul sebagai variabel saat digunakan
\r\n
dan itu akan berhasil.sumber
retas tetapi berfungsi - (diuji pada chrome dan seluler)
tambahkan saja tidak ada ruang istirahat sampai rusak - Anda mungkin harus membatasi ukuran tooltip tergantung pada jumlah konten tetapi untuk pesan teks kecil ini berfungsi:
Mencoba segala sesuatu di atas dan ini adalah satu-satunya hal yang bekerja untuk saya -
sumber
Saya sudah mencoba dengan "" menampilkan teks judul di baris baru dan berfungsi seperti pesona
sumber
Saya menggunakan firefox 68.7.0esr dan

itu tidak berfungsi. Memutus garis melalui<CR>
berhasil jadi saya akan dengan itu karena sederhana dan maju. yaitusumber
gunakan
data-html="true"
dan terapkan<br>
.sumber