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

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

Для меня двухэтапное решение (комбинация форматирования заголовка и добавления стиля) работает следующим образом:

1) Отформатируйте title attrbiute:

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

2) Добавьте этот стиль к элементу tips:

white-space: pre-line;

Протестировано в IE8, Firefox 22 и Safari 5.1.7.

Answer 2

можно добавить разрывы строк в нативных подсказках HTML, просто распространив атрибут title по строкам мултипл.http://craigsworks.com/projects/qtip/.

Прост в настройке и использовании.В качестве альтернативы существует множество бесплатных плагинов для всплывающей подсказки javascript.

edit: поправка в первом утверждении.

Answer 3

Хорошо, если вы используете Утилита Jquery Tooltip , то в файле Javascript "jquery-ui.js" найдите следующий текст:

tooltip.find(".ui-tooltip-content").html(content);

и поставить над этим

content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');

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

Answer 4

просто используйте \ n в заголовке и добавьте это css

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

Answer 5

Просто добавьте этот фрагмент кода в ваш скрипт:

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

и, как уже упоминалось в ответах выше, data-html должно быть "true".Это позволит вам использовать HTML-теги и форматирование внутри значения атрибута title.

Answer 6

использование 
 должно работать (я тестировал в Chrome , Firefox и Edge ):

let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
    favTitle += users[j].username + "&#13;";

$("#item").append('<i title="In favorite users: &#13;' + favTitle + '">Favorite</i>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>

Answer 7

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

&#013

Там не должно быть; персонаж.

Answer 8

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

<a title="First Line &#xA;Second Line">Hover Me </a>

Answer 9

Использование .html () вместо .text () сработало для меня.Например

.html("This is a first line." + "<br/>" + "This is a second line.")

Answer 10

AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

uib-tooltip, uib-tooltip-template и uib-tooltip-html

- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template

В моем случае я выбрал uib-tooltip-html , и в нем три части:

1. Конфигурация
2. Контроллер * * 1016
3. HTML

* * Пример тысячи двадцать-одина: * ** 1023 тысячу двадцать две *

(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

<div ng-controller="myController as get">
     <span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>

Для получения дополнительной информации, пожалуйста, проверьте здесь