Добавление разрыва строки в подсказках

Question

Добавление разрыва строки в подсказках

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

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

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

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

20 126

html newline tooltip

20 ответов:

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

53

этот CSS-это то, что, наконец, сработало для меня в сочетании с переводом строки в моем редакторе:
.tooltip-inner {
    white-space: pre-wrap;
}
найти здесь: как сделать Twitter bootstrap всплывающие подсказки имеют несколько строк?

27

просто добавить атрибут data

data-html= "true"

и вы хорошо идти.

например. использование:
<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>
он работал в большинстве всплывающих подсказок плагинов, которые я пробовал на данный момент.

27

дать \n между текстом. Он работает на всех браузерах.
Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
это будет работать для меня, и он используется в код позади.

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

9

\n
внешний вид
.tooltip-inner {
    white-space: pre-line;
}
работал для меня.

5

Я нашел его. Это можно сделать, просто сделав так
<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

4

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

3

можно добавить разрывы строк в собственных подсказках HTML, просто имея атрибут title, распределенный по линиям mutliple.

тем не менее, я бы рекомендовал использовать плагин подсказки jQuery, такой как Q-Tip:http://craigsworks.com/projects/qtip/.

Он прост в настройке и использовании. Кроме того, есть много бесплатных плагинов подсказки javascript вокруг тоже.

edit: исправление на первом операторе.

2

для меня 2-х шаговое решение (сочетание форматирования заголовка и добавления стиля) работало следующим образом:

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.

2

версия javascript

С  (html) это 0D (hex), это может быть представлено как '\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>

2

просто добавьте данные-html= "true"
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>

2

Если вы используете jQuery Tooltip utility, затем в "jquery-ui.JS " Javascript file найти следующий текст:
tooltip.find(".ui-tooltip-content").html(content);
и поставить выше
content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');
Я надеюсь, что это также будет работать для вас.

1

решение для меня было http://jqueryui.com/tooltip/:

а вот код (та часть скрипта, которая делает <br/> работ "содержание:"):

HTML HEAD

<head runat="server">
    <script src="../Scripts/jquery-2.0.3.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
    /*Position:
      my =>  at
      at => element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
</script>
</head>

ASPX или HTML control

<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>

надеюсь, что это поможет кому-то

0

терка, чем jQuery UI 1.10, не поддерживает использование тега html внутри атрибута title, потому что его недопустимый html.

поэтому альтернативным решением является использование содержимого всплывающей подсказки. См - http://api.jqueryui.com/tooltip/#option-content

0

использовать
&#013
не должно быть никаких ; характер.

0

Если вы используете jquery-ui 1.11.4:

var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        content: function() {
            // support: IE<9, Opera in jQuery <1.7
            // .text() can't accept undefined, so coerce to a string
            var title = $( this ).attr( "title" ) || "";
            // Escape title, since we're going from an attribute to raw HTML
Replace-->  //return $( "<a>" ).text( title ).html();
by -->      return $( "<a>" ).html( title );
             },

0

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

УМБ-подсказки, УМБ-подсказка-шаблон и УМБ-подсказки в формате 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

в моем случае, я выбрал УМБ-подсказки в формате HTML и есть три части к нему:

конфигурация
контроллер
HTML

пример:

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

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

0

использование .html () вместо .текст () работал на меня. Например
.html("This is a first line." + "<br/>" + "This is a second line.")

0

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

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>

0

Fred Senese · Accepted Answer · 2012-02-02 21:20:41

просто используйте код сущности  для переноса в атрибут title.