¿Cómo se pueden agregar saltos de línea dentro de una información sobre herramientas HTML?

Intenté usar <br/>y \ndentro de la información sobre herramientas de la siguiente manera:

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

Sin embargo, esto fue inútil y pude ver el texto literal <br/>y \ndentro de la información sobre herramientas. Cualquier sugerencia será de ayuda.

Simplemente use el código de entidad 
para un salto de línea en un atributo de título.

Simplemente agregue un atributo de datos

data-html = "verdadero"

y estás listo para irte.

P.ej. uso:

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

Ha funcionado en la mayoría de los complementos de información sobre herramientas que he probado hasta ahora.

El 
combinado con el estilo de espacio en blanco: pre-línea; trabajó para mi.

Este CSS es lo que finalmente funcionó para mí junto con un salto de línea en mi editor:

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

Encontrado aquí: ¿Cómo hacer que la información sobre herramientas de arranque de Twitter tenga varias líneas?

Dar \nentre el texto. Funciona en todos los navegadores.

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

Esto funcionará para mí y se usa en el código detrás.

Espero que esto funcione para usted

\n

con el estilo

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

trabajó para mi.

Lo encontré. Se puede hacer simplemente haciendo así

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

La versión de javascript

Como 
(html) es 0D(hexadecimal), esto se puede representar como'\u000d'

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

Adicionalmente,

Compartiendo con ustedes un filtro AngularJS que reemplaza \ncon ese personaje gracias a las referencias en las otras respuestas

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

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

uso

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

simplemente use \ n en el título y agregue este CSS

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

<br /> funcionó si está usando qTip

Simplemente agregue data-html = "true"

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

es posible agregar saltos de línea dentro de la información sobre herramientas HTML nativa simplemente haciendo que el atributo de título se extienda entre varias líneas.

Sin embargo, recomendaría usar un complemento de información sobre herramientas jQuery como Q-Tip: http://craigsworks.com/projects/qtip/ .

Es simple de configurar y usar. Alternativamente, también hay muchos complementos de información sobre herramientas de JavaScript gratuitos.

editar: corrección en la primera declaración.

Para mí, una solución de 2 pasos (combinación de formatear el título y agregar el estilo) funcionó de la siguiente manera:

1) Formatee el titleatributo:

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

2) Agregue este estilo al tipselemento:

white-space: pre-line;

Probado en IE8, Firefox 22 y Safari 5.1.7.

Simplemente agregue este fragmento de código en su script:

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

y por supuesto como se menciona en las respuestas anteriores, data-htmldebería ser "true". Esto le permitirá usar etiquetas html y formatear dentro del valor del titleatributo.

Bueno, si está utilizando la utilidad Jquery Tooltip , en el archivo Javascript "jquery-ui.js" encuentre el siguiente texto:

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

y poner por encima de eso

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

Espero que esto también funcione para ti.

Entonces, si está utilizando bootstrap4, esto funcionará.

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

</style>

<script> 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>

<a data-toggle="tooltip" data-placement="auto" title=" first line &#010; next line" href= ""> Hover me </a>

Si está utilizando un proyecto de Django, también podemos mostrar datos dinámicos en información sobre herramientas como:

<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>

La solución para mí fue http://jqueryui.com/tooltip/ :

Y aquí el código (la parte del script que hace que <br/>Works sea "contenido:"):

HEAD HTML

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

Control ASPX o HTML

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

Espero que esto ayude a alguien

Más importante que Jquery UI 1.10 no es compatible con el uso de la etiqueta html dentro del atributo title porque no es html válido.

Entonces, la solución alternativa es utilizar la opción de contenido de información sobre herramientas. Consulte: http://api.jqueryui.com/tooltip/#option-content

Utilizar

&#013

No debería haber ninguno; personaje.

si está utilizando 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 );
             },

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

uib-tooltip, uib-tooltip-template y 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

En mi caso, opté por uib-tooltip-html y hay tres partes:

1. configuración
2. controlador
3. HTML

Ejemplo:

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

Para más información, consulte aquí

Usar .html () en lugar de .text () funcionó para mí. Por ejemplo

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

el uso 
debería funcionar (lo he probado en Chrome , Firefox y 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>

¡Hola, este código funcionará en todos los navegadores! Utilicé para la nueva línea en Chrome y Safari y ul li para IE

 function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '<li>';
              const liEnd = '</li>';
              const bullet = '&#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='<ul>'
              const unOrderListEnd='</ul>'
              const fakeNewline = '&#013;&#010;';
              for (let i = 0; i < values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }

Puede usar la información sobre herramientas de bootstrap y no olvide establecer la opción html en true.

<div id="tool"> tooltip</div>

$('#tool').tooltip({
     title: 'line one' +'<br />'+ 'line two',
     html: true
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Simplemente use el código de entidad 
para un salto de línea en un atributo de título.

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

Este CSS te ayudará.

    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }