it-roy-ru.com

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

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

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

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

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

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (я использую C #)

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

296
penderi

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

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

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

272
Greg

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

272
Kornel

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

Текст отображается (если есть) в зависимости от браузера. Маленькие подсказки работают в большинстве браузеров. Длинные всплывающие подсказки и разрыва строки работают в IE и ​​Safari (используйте &#10; или &#13; для новой новой строки). Firefox и Opera не поддерживают переводы строк. Firefox не поддерживает длинные всплывающие подсказки.

http://modp.com/wiki/htmltitletooltips

Обновление:

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

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

Протестировано это в IE, Chrome, Safari, Firefox (последние версии 2012-11-27):
&#13;

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

65
Morten Repsdorph Husfeldt

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

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

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

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

46
cprcrack

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

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

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

25
amurra

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

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

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

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

15
Anil Bharadia

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

Демонстрация

enter image description here

14
Juan Cortés

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

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

7
Greg Dean

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

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

Fiddle

6
student

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

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

5
YouYou

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

5
Rehan Khwaja

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

5
roborourke

&#xD; <----- Это текст, необходимый для вставки Carry Return.

5
Juan

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

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

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

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

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

4
user3087089

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

CDATA - это последовательность символов из набора символов документа и может включать в себя объекты символов. Пользовательские агенты должны интерпретировать значения атрибутов следующим образом:

  • Заменить символьные объекты на символы,
  • Игнорировать перевод строки,
  • Замените каждый возврат каретки или табуляцию одним пробелом.

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

3
Salman A

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

3
Dave

Этот &#013; должен работать, если вы просто используете простой атрибут title.

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

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

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

2
Chris

Синтаксис Razor

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

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

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

взломать, но работает - (проверено на chrome и ​​мобильном)

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

&nbsp;&nbsp; etc

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

0
Fstarocka Burns