Añadir salto de línea dentro de las descripciones emergentes

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

Intenté usar <br/> y \n dentro de la descripción emergente 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 \n dentro de la descripción. Cualquier sugerencia será útil.

Author: reformed, 2010-07-27
Source

20 answers

Simplemente use el código de entidad &#013; para un salto de línea en un atributo title.

 207
Author: Fred Senese,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-02 19:20:41

El &#013; combinado con el estilo espacio en blanco: pre-línea; funcionó para mí.

 53
Author: GuitarWorker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-18 15:06:47

Este CSS es lo que finalmente funcionó para mí en conjunto con un linefeed en mi editor: 

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

Se encuentra aquí: ¿Cómo hacer que las sugerencias de bootstrap de Twitter tengan varias líneas?

 27
Author: Dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:27

Simplemente agregue un atributo de datos

Data-html = "true"

Y ya está listo.

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

 27
Author: Siwalik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-26 19:12:49

Da \n entre 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 code behind.

Espero que esto funcione para usted

 9
Author: Priyanka Thakur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-27 13:19:57 
\n

Con el estilo

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

Funcionó para mí.

 5
Author: klausf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-24 09:56:38

Lo encontré. Se puede hacer simplemente haciendo así

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>
 4
Author: Aakash Chakravarthy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-27 05:37:15

&lt;br /&gt; funcionó si está utilizando qTip

 3
Author: Eduardo Molteni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-25 21:06:51

Es posible agregar saltos de línea dentro de las sugerencias de herramientas HTML nativas simplemente haciendo que el atributo title se extienda sobre líneas múltiples.

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

Es fácil de configurar y usar. Alternativamente, también hay muchos complementos de información sobre herramientas de javascript gratuitos.

Editar: corrección en la primera instrucción.

 2
Author: Ross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-27 06:58:12

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) Formatear el title attrbiute: 

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

2) Añade este estilo al elemento tips: 

white-space: pre-line;

Probado en IE8, Firefox 22 y Safari 5.1.7.

 2
Author: user2052547,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-08 14:55:13

La versión de javascript

Dado que &#013; (html) es 0D (hexadecimal), esto se puede representar como '\u000d' 

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

Además,

Compartiendo con ustedes un filtro AngularJS que reemplaza \n con ese carácter gracias a las referencias en el 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>
 2
Author: Jossef Harush,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:23

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>
 2
Author: Babo Darbinyan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-22 17:05:56

Bueno, si está utilizando Jquery Tooltip utility, entonces en "jquery-ui.js " Archivo Javascript encontrar 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 usted.

 1
Author: user2160658,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-13 14:00:10

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

Y aquí el código (la parte del script que hace que <br/> Funcione es "content:"):

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>

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

 0
Author: Diego P,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-04 16:29:57

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

Así que la solución alternativa es usar la opción contenido de información sobre herramientas. Refer - http://api.jqueryui.com/tooltip/#option-content

 0
Author: Jaison,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-10 05:38:54

Use 

&#013

No debería haber ningún ; carácter.

 0
Author: user1464581,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-03 16:18:55

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 );
             },
 0
Author: peter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-04 15:43:56 
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 tiene 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 obtener más información, consulte aquí

 0
Author: omostan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-11 11:42:15

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

.html("This is a first line." + "<br/>" + "This is a second line.")
 0
Author: Raj Stha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-23 03:50:14

Use &#13; debería funcionar (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>
 0
Author: Nourein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-09 07:41:24