Добавить разрыв строки в подсказках

Question

Как можно добавить разрывы строк в подсказке HTML?

Я попытался использовать <br/> и \n в подсказке следующим образом:

<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>

Однако это было бесполезнои я мог видеть буквальный текст <br/> и \n в подсказке.Любые предложения будут полезны.

Answer 1

Просто используйте код объекта 
 для разрыва строки в атрибуте заголовка.

Answer 2


 в сочетании со стилем пробел: предстрочный; работал для меня.

Answer 3

Просто добавьте атрибут данных

data-html = "true"

и все готово.

Например.Использование:

<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>

Он работал в большинстве плагинов всплывающей подсказки, которые я пробовал на данный момент.

Answer 4

Этот CSS, наконец, сработал для меня в сочетании с переводом строки в моем редакторе:

.tooltip-inner {
    white-space: pre-wrap;
}

Найдено здесь: Как сделать так, чтобы всплывающие подсказки Twitter имели несколько строк?

Answer 5

Дайте \n между текстом.Это работает во всех браузерах.

Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";

Это будет работать для меня и используется в коде позади.

Надеюсь, это будет работать для вас

Answer 6

\n

со стилем

.tooltip-inner {
    white-space: pre-line;
}

у меня сработало.

Answer 7

Я нашел это.Это можно сделать, просто сделав вот так

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

Answer 8

Версия JavaScript

Поскольку 
 (html) равно 0D (шестнадцатеричное), это может быть представлено как '\u000d'

str = str.replace(/\n/g, '\u000d');

Кроме того,

Поделитесь с вами, ребята, AngularJS фильтром , который заменяет \n на этот символ, благодаря ссылкам в других ответах

app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});

использование

<div title="{{ message | titleLineBreaker }}"> </div>

Answer 9

Просто добавьте data-html = "true"

<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>

Answer 10

<br /> сработало, если вы используете qTip