Bagaimana saya bisa menggunakan carriage return dalam tooltip HTML?

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; / 

• \r\n
• Environment.NewLine (Saya menggunakan C #)

Tidak satu pun di atas berfungsi. Apa itu mungkin?

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.

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

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 
atau 
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 
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>

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



Bekerja di semua dari mereka ...

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");

Pada Firefox 12 mereka sekarang mendukung jeda baris menggunakan entitas HTML umpan baris: 


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

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

Jika Anda menggunakan jQuery:

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

akan bekerja.

diuji di IE-9: bekerja.

Sebagai kontribusi terhadap 
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


 akan bekerja di semua browser utama (termasuk IE)

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>

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.


 <----- Ini adalah teks yang diperlukan untuk memasukkan Carry Return.

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

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

Di Chrome 79, 
 tidak berfungsi lagi.

Saya berhasil dengan:




Ini berfungsi di semua browser utama.

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

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.

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'

Ini 
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>

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.

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.

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 .

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>

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:

   etc

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

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

Saya menggunakan firefox 68.7.0esr dan 
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

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