Как я могу использовать возврат каретки во всплывающей подсказке HTML?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
В настоящее время я добавляю на наш сайт подробные всплывающие подсказки, и мне бы хотелось (без необходимости прибегать к модному плагину jQuery, я знаю, что их много!) использовать возврат каретки для форматирования всплывающей подсказки.
Чтобы добавить совет, я использую title атрибут.Я просмотрел обычные сайты и использовал базовый шаблон:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
Я пробовал заменить ? с:
<br />&013; / \r\nEnvironment.NewLine(Я использую С#)
Ничего из вышеперечисленного не работает.Является ли это возможным?
Решение
Это так просто, что ты себя ударишь...просто нажмите 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 поддерживает использование вставить разрыв строки в HTML title атрибут.См. пример фрагмента ниже.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>Протестировано в IE, Chrome, Safari, Firefox (последние версии 2012-11-27):
Работает во всех...
Также стоит упомянуть, что если вы устанавливаете атрибут title с помощью Javascript следующим образом:
divElement.setAttribute("title", "Line one Line two");
Это не сработает.Вам нужно заменить десятичное число ASCII 10 на шестнадцатеричное ASCII так, как оно экранируется с помощью Javascript.Так:
divElement.setAttribute("title", "Line one\x0ALine two");
Начиная с Firefox 12, они теперь поддерживают разрывы строк с использованием HTML-объекта перевода строки:
<span title="First line Second line">Test</span>
Это работает в IE и соответствует спецификации HTML5 для атрибут заголовка.
Если вы используете jQuery:
$(td).attr("title", "One \n Two \n Three");
будет работать.
протестировано в IE-9:работающий.
В качестве вклада в 
 решение, мы также можем использовать 	 для вкладок, если вам когда-нибудь понадобится сделать что-то подобное.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>Демо
Я знаю, что опаздываю на вечеринку, но для тех, кто просто хочет увидеть, как это работает, вот демо: http://jsfiddle.net/rzea/vsp6840b/3/
Используемый HTML:
<a href="#" title="First Line
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>
будет работать во всех основных браузерах (включая IE)
У нас было требование протестировать все это, вот чем я хочу поделиться.
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 Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#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
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>Я не верю, что это так.Firefox 2 в любом случае обрезает длинные заголовки ссылок, и на самом деле их следует использовать только для передачи небольшого количества справочного текста.Если вам нужен дополнительный текст объяснения, я бы посоветовал разместить его в абзаце, связанном со ссылкой.Затем вы можете добавить код JavaScript всплывающей подсказки, чтобы скрыть эти абзацы и показать их в виде всплывающих подсказок при наведении курсора мыши.IMO, это лучший вариант для того, чтобы заставить его работать в кроссбраузерном режиме.

 <----- Это текст, необходимый для вставки возврата переноса.
В Chrome 16 и, возможно, более ранних версиях вы можете использовать « ».В качестве примечания: « » также работает.
Что касается кого не сработало, вам нужно стилизовать элемент, на котором видны строки, как: white-space: pre-line;
Ссылка на этот ответ: https://stackoverflow.com/a/17172412/1460591
Просто используйте это:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Вы можете добавить новую строку в заголовок, используя это 
.
Просто используйте JavaScript.Затем совместим с большинством и более старыми браузерами.Используйте escape-последовательность для новой строки.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
Судя по доступной информации о доступности и использованию всплывающих подсказок, увеличивающих их размер с помощью CR или разрыва строки, следует отметить тот факт, что различные браузеры не могут или не хотят прийти к согласию по основам, показывает, что они не особо заботятся о доступности.
Согласно этому статья на сайте w3c:
CDATA - это последовательность символов из набора символов документа и может включать в себя сущности символов.Пользовательские агенты должны интерпретировать значения атрибутов следующим образом:
- Замените сущности символов на символы,
- Игнорировать переводы строк,
- Замените каждый возврат каретки или табуляцию одним пробелом.
Это означает, что (по крайней мере) CR и LF не будут работать внутри атрибута заголовка.Я предлагаю вам использовать плагин всплывающих подсказок.Большинство этих плагинов позволяют отображать произвольный HTML-код в качестве всплывающей подсказки элемента.
Этот 
 должно работать, если вы просто используете простой атрибут заголовка.
во всплывающих окнах начальной загрузки просто используйте data-html="true" и используйте html в data-content атрибут .
<div title="Hello 
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 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>
взломать, но работает - (проверено на Chrome и мобильных устройствах)
просто не добавляйте пробелов до тех пор, пока он не сломается. Возможно, вам придется ограничить размер всплывающей подсказки в зависимости от объема контента, но для небольших текстовых сообщений это работает:
etc
Перепробовал все вышеперечисленное, и это единственное, что мне помогло -
использовать data-html="true" и применить <br>.
