Bagaimana saya bisa menggunakan carriage return dalam tooltip HTML?

330

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 titleatribut. 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; / &#13;
  • \r\n
  • Environment.NewLine (Saya menggunakan C #)

Tidak satu pun di atas berfungsi. Apa itu mungkin?

penderi
sumber
Ini cukup sulit, tetapi mungkin ada solusinya. Ubah semua ruang pada judul Anda menjadi ruang yang tidak terputus &nbsp;. Kemudian letakkan spasi di tempat yang Anda inginkan. Anda mungkin juga perlu menambahkan banyak &nbsp;karakter sebelum spasi Anda (jeda baris).
jumxozizi

Jawaban:

292

Sangat sederhana sehingga Anda akan menendang diri sendiri ... cukup tekan enter!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

Firefox tidak akan menampilkan tooltip multi-line sama sekali - itu akan menggantikan baris baru dengan apa-apa.

Greg
sumber
69
Jawaban ini sudah ketinggalan zaman, Firefox tidak menampilkan baris baru dalam judul sekarang (saya menggunakan v25). Ini bekerja dengan \n, \u000Adan \x0A.
Halcyon
1
@Halcyon, hanya untuk memperjelas bagi pembaca lain, ketiga kode di atas sepertinya bukan HTML. Mereka terlihat lebih seperti urutan pelarian string bahasa C yang diturunkan.
Sam
3
@ Sam, saya tidak mengerti apa yang Anda maksud dengan itu. \x0A(byte) adalah kode karakter yang sesuai dengan baris baru. Sama untuk \u000A(unicode). \njuga baris baru.
Halcyon
13
@Halcyon, saya mencoba memasukkan urutan melarikan diri itu ke dalam titleatribut 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.
Sam
4
@Tarquin Mereka tidak bekerja dalam HTML, mereka hanya bekerja secara khusus dalam tanda kutip ganda PHP karena itu adalah fitur tanda kutip ganda PHP.
Brilliand
307

The spesifikasi terbaru memungkinkan karakter line feed, sehingga satu baris sederhana dalam atribut atau badan &#10;(catatan bahwa karakter #dan ;diperlukan) adalah OK.

Kornel
sumber
4
itu tidak didukung oleh Chrome tetapi untuk Firefox baik-baik saja!
Alaeddine
5
Saya mencoba keduanya &#10;dan &#13;. &#13;tidak akan menghormati "jeda baris" yang dimaksud dalam versi chrome 50.0.2661.94 (64-bit). &#10;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.
Tass
Ini sangat berguna bagi saya karena saya mencoba melakukan itu pada editor posting Wordpress.
ed1nh0
13
& # 10; berfungsi dengan baik di IE, Firefox, dan Chrome. Terima kasih!
Daniel
Untuk chrome & # 013; ....... Contoh: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid
75

Coba karakter 10. Namun tidak akan berfungsi di Firefox. :(

Teks ditampilkan (jika ada) dengan cara yang tergantung pada browser. Tooltips kecil berfungsi di sebagian besar browser. Tooltips panjang dan line breaking berfungsi di IE dan Safari (gunakan &#10;atau &#13;untuk baris baru). Firefox dan Opera tidak mendukung baris baru. Firefox tidak mendukung tooltips panjang.

http://modp.com/wiki/htmltitletooltips

Memperbarui:

Pada Januari 2015 Firefox tidak mendukung penggunaan &#13;untuk menyisipkan garis istirahat dalam titleatribut HTML . Lihat contoh cuplikan di bawah ini.

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Stefan Mai
sumber
2
+1. Jika Anda memutuskan untuk menggunakan plugin jQuery, untuk aksesibilitas yang optimal, ia harus membaca kontennya dari atribut title dan mengganti beberapa karakter tak terlihat yang sewenang-wenang untuk penghentian baris saat runtime.
Kent Fredric
+1. Hal yang menarik. Masih ada masalah beberapa UAS memotong judul ketika muncul - FF2 seingat saya tapi itu kurang masalah hari ini.
roborourke
3
Pada Januari 2015 Firefox tidak mendukung penggunaan &#13;dalam titleatribut untuk memasukkan jeda baris.
pseudosavant
Saya tidak bisa mendapatkan jeda baris untuk bekerja di IE11 dalam elemen SVG <title>. Adakah yang lebih sukses dengan itu? Mencoba kode char menyebutkan di atas / di bawah ini, sepertinya tidak ada yang berhasil.
RemEmber
64

Menguji ini di IE, Chrome, Safari, Firefox (versi terbaru 2012-11-27):
&#13;

Bekerja di semua dari mereka ...

Morten Repsdorph Husfeldt
sumber
Metode pertama (memecah baris dalam kode) tampaknya lebih sederhana, tetapi tidak berlaku untuk program kode js-pemformat otomatis.
horiatu
@Camilo Martin, baris baru dan umpan baris sama di seluruh platform. &#10;adalah linefeed unix sama seperti itu linefeed windows. Demikian pula, &#13;baris baru untuk kedua platform. The spek Menentukan linefeed (LF) arang yang tentu saja &#10;pada kedua (semua?) Platform.
matty
2
@matty Tidak yakin jika saya mengerti Anda - hal yang benar untuk digunakan tampaknya unix LF(yang merupakan linefeed standar antar protokol dan alat), CRhanya digunakan oleh Mac lama (dan platform tidak jelas lainnya) dan tampaknya tidak pada tempatnya.
Camilo Martin
Saya minta maaf atas pilihan kata yang membingungkan saya. Apa yang saya sebut linefeed (# 10) sebenarnya adalah baris baru, meskipun sering disebut sebagai LF. Apa yang saya sebut baris baru (# 13) sebenarnya adalah carriage return. Bagaimanapun, poin saya adalah bahwa nilai-nilai itu sama di semua platform. Fakta bahwa windows (menggunakan kedua karakter ini untuk mengakhiri baris) dan mac (menggunakan karakter "salah" untuk mengakhiri baris) harus tidak relevan dalam hal entitas HTML mana yang akan digunakan dalam atribut judul. Spesifikasi mengatakan &#10;, meskipun tampaknya &#13;berfungsi dalam banyak situasi juga.
matty
2
polos & # 13; tidak berfungsi untuk chrome di Linux. Urutan & # 13; & # 10; Namun demikian.
Sam Watkins
51

Juga perlu disebutkan, jika Anda mengatur atribut judul dengan Javascript seperti ini:

divElement.setAttribute("title", "Line one&#10;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");

cprcrack
sumber
@ MaxNanasy Setuju, dan mereka setara ( \nberarti kode char 10 pula)
rvighne
29

Pada Firefox 12 mereka sekarang mendukung jeda baris menggunakan entitas HTML umpan baris: &#10;

<span title="First line&#10;Second line">Test</span>

Ini berfungsi di IE dan benar sesuai dengan spesifikasi HTML5 untuk atribut title .

amurra
sumber
16

Jika Anda menggunakan jQuery:

$(td).attr("title", "One \n Two \n Three");

akan bekerja.

diuji di IE-9: bekerja.

Anil Bharadia
sumber
Bekerja di MVC 3 Contoh: @ Html.DropDownList ("RegId", null, "Select Region", new {title = "Pilih wilayah dari menu drop-down, \ nyang diperlukan untuk mendapatkan daftar nama kontrak yang valid" , @class = "form-control", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance
15

Sebagai kontribusi terhadap &#013;solusi, kami juga dapat menggunakan &#009tab jika Anda perlu melakukan sesuatu seperti ini.

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Demo

masukkan deskripsi gambar di sini

Juan Cortés
sumber
8

&#13; akan bekerja di semua browser utama (termasuk IE)

Greg Dean
sumber
13
Jawaban ini sudah usang; & # 13; berfungsi di Chrome dan browser lain juga.
SaeX
7

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:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>
Ricardo Zea
sumber
2
Respons paling mutakhir, dan bekerja sangat baik di Firefox. Terima kasih.
Marwan مروان
6

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.

Roborourke
sumber
6

&#xD; <----- Ini adalah teks yang diperlukan untuk memasukkan Carry Return.

Juan
sumber
1
Berfungsi di semua browser :)
MonoThreaded
6

Pada Chrome 16, dan mungkin versi sebelumnya, Anda dapat menggunakan "\ n". Sebagai sidenote, "\ t" juga berfungsi

Rehan Khwaja
sumber
6

Kami memiliki persyaratan di mana kami perlu menguji semua ini, inilah yang ingin saya bagikan

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")
<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new 
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>


<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code></code>Unordered list tooltip</p>
<hr/>


<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

Biola

Mohammed Zameer
sumber
6

Di Chrome 79, &#13; tidak berfungsi lagi.

Saya berhasil dengan:

&#13;&#10;

Ini berfungsi di semua browser utama.

David Vielhuber
sumber
5

Sedangkan untuk siapa yang &#10;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

Youans
sumber
1
Gaya ini perlu diterapkan untuk apa? Judul? suka a[title]?
Mohammed Zameer
4

Gunakan ini saja:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

Anda dapat menambahkan baris baru pada judul dengan menggunakan ini &#x0a.


sumber
4

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

   document.getElementById("ElementID").title = 'First Line text \n Second line text'
Welshboy
sumber
Versi Chrome apa? Ini berfungsi untuk saya dan saya menggunakan Chrome.
Welshboy
Sebenarnya saya menggunakan Chrome versi terbaru, karena saya mengerjakan SVG Elements, itu tidak berfungsi, tidak apa-apa.
NewPHPer
4

Ini &#013;akan berfungsi jika Anda hanya menggunakan atribut judul sederhana.

pada bootstrap popovers, cukup gunakan data-html="true" dan gunakan html di data-contentatribut.

<div title="Hello &#013;World">hover here</div>

csandreas1
sumber
3

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.

Dave
sumber
2
Untuk solusi yang sangat mudah untuk melintasi tooltips yang disesuaikan dengan browser, lihat kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
Dave
@DaveIni adalah tautan yang bagus, namun pergantian baris dalam demo terjadi karena atribut lebar
Melsi
3

Menurut artikel ini di situs web w3c :

CDATA adalah urutan karakter dari kumpulan karakter dokumen dan dapat mencakup entitas karakter. Agen pengguna harus menafsirkan nilai atribut sebagai berikut:

  • Ganti entitas karakter dengan karakter,
  • Abaikan umpan baris,
  • Ganti setiap pengembalian carriage atau tab dengan satu ruang.

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.

Salman A
sumber
1
Ya, saya tahu itu tidak resmi. Anda salah, bagaimanapun juga. Itu tidak berarti mereka tidak akan ditampilkan. Ini berarti spesifikasi W3C tidak menyatakan bagaimana mereka harus ditampilkan .... Maksud dari posting ini bukan untuk menyarankan mereka dapat digunakan untuk menggantikan lebih banyak plugin fungsional .... itu lebih merupakan kasus selama degradasi dapat digunakan lagi.
penderi
@ip: Saya salah karena rekomendasi w3c yang diperbarui menyarankan bahwa browser membagi konten di sekitar karakter LF. Namun browser akan menerapkan perilaku ini pada akhirnya.
Salman A
2

Tooltips yang tampak lebih bagus dapat dibuat secara manual, dan dapat menyertakan pemformatan HTML.

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

Ini diambil dari posting w3schools di ini. Eksperimen dengan kode di atas di sini .

Chris
sumber
1

Sintaks Razor

Dalam kasus ASP.NET MVC Anda hanya dapat menyimpan judul sebagai variabel saat digunakan \r\ndan itu akan berhasil.

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>
Shelby115
sumber
0

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:

&nbsp;&nbsp; etc

Mencoba segala sesuatu di atas dan ini adalah satu-satunya hal yang bekerja untuk saya -

Fstarocka Burns
sumber
0

Saya sudah mencoba dengan "" menampilkan teks judul di baris baru dan berfungsi seperti pesona

Niket Joshi
sumber
0

Saya menggunakan firefox 68.7.0esr dan &#013;itu tidak berfungsi. Memutus garis melalui <CR>berhasil jadi saya akan dengan itu karena sederhana dan maju. yaitu

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
pengguna3416126
sumber
-1

gunakan data-html="true"dan terapkan <br>.

Nithin C
sumber
1
Ini bukan bagian dari spesifikasi. Harus berupa plugin tooltip acak
TJ