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

Question

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

Чтобы добавить подсказку, я использую атрибут title. Я просмотрел обычные сайты и использовал базовый шаблон:

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

Я пытался заменить ? на:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (я использую C #)

Ничего из вышеперечисленного не работает. Возможно ли это?

Answer 1

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

Answer 2

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

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

Firefox вообще не будет отображать многострочные всплывающие подсказки - он заменит символы новой строки ничем.

Answer 3

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

Текст отображается (если есть) в зависящий от браузера способ. Маленький всплывающие подсказки работают в большинстве браузеров. Долго всплывающие подсказки и разрыв строки работают в IE и Safari (используйте 
 или 
 для новая новая строка). Firefox и Opera не делают поддержка новых строк. Firefox не поддержка длинных подсказок.

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>

Answer 4

Проверено в IE, Chrome, Safari, Firefox (последние версии 2012-11-27):



Работает во всех из них ...

Answer 5

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

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

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

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

Answer 6

Начиная с Firefox 12, теперь они поддерживают разрывы строк с помощью HTML-сущности перевода строки: 


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

Это работает в IE и является правильным в соответствии со спецификацией HTML5 для атрибута title .

Answer 7

Если вы используете jQuery:

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

будет работать.

протестировано в IE-9: работает.

Answer 8

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

Демо

Answer 9


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

Answer 10

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