Как я могу использовать возврат каретки во всплывающей подсказке HTML?

Попробуйте символ 10. Однако он не будет работать в Firefox. :(

The text is displayed (if at all) in a browser dependent manner. Small tooltips work on most browsers. Long tooltips and line breaking work in IE and Safari (use 
 or 
 for a new newline). Firefox and Opera do not support newlines. Firefox does not support long tooltips.

http://modp.com/wiki/htmltitletooltips

Обновлять:

По состоянию на январь 2015 года Firefox поддерживает использование 
 для вставки разрыва строки в HTML-атрибут title. См. Пример фрагмента ниже.

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


 будет работать во всех основных браузерах (включая IE)

Я не верю, что это так. Firefox 2 в любом случае обрезает длинные заголовки ссылок, и их действительно следует использовать только для передачи небольшого количества справочного текста. Если вам нужно больше текста объяснения, я бы посоветовал поместить его в абзац, связанный со ссылкой. Затем вы можете добавить javascript-код всплывающей подсказки, чтобы скрыть эти абзацы и показать их как всплывающие подсказки при наведении курсора. Это лучший способ заставить его работать в кросс-браузере IMO.

Это так просто, что вы себя накинете: просто нажмите Enter!

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

последняя спецификация разрешает символ перевода строки, поэтому простой разрыв строки внутри атрибута или объекта 
 (обратите внимание, что требуются символы # и ;).


 <----- Это текст, необходимый для вставки переноса возврата.

Из доступной информации о доступности и использования всплывающих подсказок, увеличивающих их размер с помощью CR или разрыва строки, можно принять во внимание тот факт, что различные браузеры не могут / не согласны по основам, показывает, что они не очень заботятся о доступности.

Согласно этому статья на сайте w3c:

CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows:

• Replace character entities with characters,
• Ignore line feeds,
• Replace each carriage return or tab with a single space.

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

В Chrome 16 и, возможно, более ранних версиях вы можете использовать «\ n». Кстати, "\ t" тоже работает

Начиная с 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: работает.

Также стоит упомянуть, если вы устанавливаете атрибут title с помощью Javascript следующим образом:

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

Это не сработает. Вы должны заменить десятичный ASCII 10 на шестнадцатеричный ASCII A так, как он был экранирован с помощью Javascript. Как это:

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

Проверено в IE, Chrome, Safari, Firefox (последние версии 27.11.2012):



Работает во всех ...

Просто используйте это:

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

Вы можете добавить новую строку в заголовок с помощью этого &#x0a.

Я знаю, что опаздываю на вечеринку, но для тех, кто просто хочет увидеть, как это работает, вот демонстрация: 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>

Просто используйте JavaScript. Затем совместим с большинством старых браузеров. Используйте escape-последовательность \ n для перевода строки.

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

Что касается тех, у кого 
 не работал, вам нужно стилизовать элемент, на котором видны строки, как: white-space: pre-line;

Ссылка из этого ответа: https://stackoverflow.com/a/17172412/1460591

В качестве вклада в решение 
 мы также можем использовать &#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>

Демо

У нас было требование, по которому нам нужно было все это протестировать, вот чем я хочу поделиться.

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

Скрипка

взломать, но работает - (проверено на хроме и мобильных устройствах)

просто добавьте пробелы без перерыва  , пока он не сломается - вам, возможно, придется ограничить размер всплывающей подсказки в зависимости от количества контента, но для небольших текстовых сообщений это работает:

   etc

Пробовал все, что описано выше, и это единственное, что у меня сработало -

Синтаксис Razor

В случае ASP.NET MVC вы можете просто сохранить заголовок как переменную, используя \r\n, и он будет работать.

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

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

Этот 
 должен работать, если вы просто используете простой атрибут заголовка.

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

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

Более красивые всплывающие подсказки могут быть созданы вручную и могут включать форматирование 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 по этому поводу. Поэкспериментируйте с приведенным выше кодом здесь.

используйте data-html = "true" и примените <br>.

Я пробовал с " "для отображения текста заголовка в новой строке, и это работает как шарм

В Chrome 79 
 больше не работает.

Мне удалось:




Это работает во всех основных браузерах.

Я использую firefox 68.7.0esr, и 
 не работает. Прерывание строк с помощью <CR> действительно сработало, поэтому я буду придерживаться этого, поскольку он прост и прямолинеен. т.е.

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

Решение «просто нажмите Enter» здесь не сработало, поэтому старый добрый vanilla js кажется довольно эффективным и чистым способом.

function customTitle(event, textHeader, text){
    let eventOrigin = event.target || event.srcElement;
    eventOrigin.title = textHeader + '\n\n' + text;
}

И на элементе onmouseover

onmouseover = "customTitle(event, 'Some Caput', 'Some more or less complete description');"

Вуаля! Работает на chrome и firefox (что не исключает других, просто не проверял).