Як я можу використовувати повернення перевезення у підказці HTML?

На даний момент я додаю багатослівні підказки на наш сайт, і мені хотілося б (не вдаючись до плагіна jQuery-модуля whiz-bang, я знаю, що їх багато!) Використовувати повернення каретки для форматування підказки.

Щоб додати підказку, я використовую titleатрибут. Я переглянув звичайні сайти та використав основний шаблон:

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

Я спробував замінити на ?:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (Я використовую C #)

Жоден із перерахованих вище не працює. Це можливо?

Ви так просто почнете бити себе ... просто натисніть Enter!

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

Firefox взагалі не відображатиме багаторядкові підказки - він замінить нові рядки нічим.

Остання специфікація дозволяє лінії подачі характер, так що простий розрив рядка всередині атрибута або об'єкта 
(зверніть увагу , що символи #і ;обов'язкові) справні.

Спробуйте символ 10. Він не працює у Firefox. :(

Текст відображається (якщо він взагалі є) у залежності від браузера. Невеликі підказки працюють у більшості браузерів. Тривалі підказки та переривання рядків працюють в IE та Safari (використовуйте 
або 
для нового нового рядка). Firefox та Opera не підтримують нові рядки. Firefox не підтримує довгі підказки.

http://modp.com/wiki/htmltitletooltips

Оновлення:

Станом на січень 2015 року Firefox підтримує використання 
для вставки розриву рядка в titleатрибут HTML . Дивіться приклад фрагменту нижче.

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

Перевірено це в IE, Chrome, Safari, Firefox (останні версії 2012-11-27):



Працює у всіх них ...

Також варто згадати, якщо ви встановлюєте атрибут заголовка таким чином Javascript:

divElement.setAttribute("title", "Line one
Line two");

Це не спрацює. Ви повинні замінити цей ASCII десятковий 10 на шістнадцятковий ASCII A таким чином, як це уникнуто за допомогою Javascript. Подобається це:

divElement.setAttribute("title", "Line one\x0ALine two");

Станом на Firefox 12, вони тепер підтримують розриви рядків за допомогою HTML-сутності каналу рядка: 


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

Це працює в IE і є правильним згідно специфікації HTML5 для атрибута заголовка .

Якщо ви використовуєте jQuery:

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

буду працювати.

перевірено в IE-9: працює.

Як внесок у 
рішення, ми також можемо використовувати &#009для вкладок, якщо вам коли-небудь потрібно щось подібне зробити.

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

Демо


 буде працювати у всіх основних браузерах (включений IE)

Я знаю, що я спізнююсь на вечірку, але для тих, хто просто хоче, щоб це працювало, ось демонстрація: http://jsfiddle.net/rzea/vsp6840b/3/

Використовуваний HTML:

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

Я не вірю в це. Firefox 2 так чи інакше обрізає довгі заголовки посилань, і їх потрібно використовувати лише для передачі невеликої кількості довідкового тексту. Якщо вам потрібен додатковий текст пояснення, я б запропонував, що він належить до абзацу, пов’язаного із посиланням. Потім ви можете додати код підказки javascript для приховування цих абзаців і показувати їх як підказки під наведенням курсору. Це ваша найкраща ставка для того, щоб змусити його працювати на крос-браузерному ІМО.


 <----- Це текст, необхідний для вставки Carry Return.

У Chrome 16 та, можливо, більш ранніх версіях ви можете використовувати "\ n". Як сторонне позначення, "\ t" також працює

У нас була вимога, де нам потрібно було протестувати все це, ось що я хочу поділитися

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

Скрипка

На Chrome 79 
більше не працює.

Я мав успіх у:




Це працює у всіх основних браузерах.

Що стосується того, хто 
не працював, ви повинні стилювати елемент, на якому видно рядки:white-space: pre-line;

Посилання на цю відповідь: https://stackoverflow.com/a/17172412/1460591

Просто скористайтеся цим:

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

Ви можете додати новий рядок до заголовка, скориставшись цим &#x0a.

Просто використовуйте JavaScript. Потім сумісний з більшістю та старими браузерами. Використовуйте послідовність відходу \ n для нового рядка.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

Це 
має спрацювати, якщо ви просто використовуєте простий атрибут заголовка.

на завантажувальних завантажувачах просто використовуйте data-html="true" та використовуйте html в data-contentатрибуті.

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

З наявної інформації про доступність та використання підказок, що збільшують їх із застосуванням CR або розриву лінії, зрозуміло, що різні браузери не можуть / не домовляться про основи, показує, що вони не надто дбають про доступність.

Відповідно до цієї статті на веб-сайті w3c :

CDATA - це послідовність символів із набору символів документа і може включати сукупності символів. Користувацькі агенти повинні інтерпретувати значення атрибутів так:

• Замініть об'єкти символів символами,
• Ігнорувати канали рядків,
• Замініть кожну коробку повернення або вкладку одним пробілом.

Це означає, що (принаймні) CR та LF не будуть працювати всередині атрибута заголовка. Я пропоную використовувати плагін підказки. Більшість цих плагінів дозволяють відображати довільний HTML як підказку елемента.

Підказки для інструментів можуть бути створені вручну, і вони можуть включати форматування 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>

Це взято з публікації w3schools щодо цього. Експериментуйте з наведеним вище кодом тут .

Синтаксис бритви

У випадку з ASP.NET MVC ви можете просто зберегти заголовок у вигляді змінної як використання, \r\nі він буде працювати.

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

<h3 title="@logTooltip">Logs</h3>

зламати, але працює - (перевірено на хромі та мобільному пристрої)

просто не додайте пробілів до перерви, доки не порушиться - можливо, вам доведеться обмежити розмір підказки залежно від кількості вмісту, але для невеликих текстових повідомлень це працює:

   etc

Перепробував усе вище, і це єдине, що працювало на мене -

Я намагався за допомогою "" відобразити текст заголовка в новому рядку, і це працює як шарм

Я на Firefox 68.7.0esr, і 
це не працює. Переривання ліній через все- <CR>таки спрацювало, тому я йду з цим, оскільки це просто і вперед. тобто

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

використовувати data-html="true"і застосовувати <br>.