html - retorno - salto de linea en tooltip bootstrap
Agregar salto de línea dentro de la información sobre herramientas (20)
¿Cómo se pueden agregar saltos de línea dentro de una información sobre herramientas HTML?
Intenté usar <br/> y /n dentro 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 era inútil y pude ver el texto literal <br/> y /n dentro de la información sobre herramientas. Cualquier sugerencia será de ayuda.
La versión de javascript
Desde 
 (html) es 0D (hex), esto se puede representar como ''/u000d''
str = str.replace(//n/g, ''/u000d'');
En adición,
Compartiendo con ustedes un filtro AngularJS que reemplaza /n con 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>
Bueno, si usas la utilidad Jquery Tooltip , en el archivo Javascript "jquery-ui.js" encuentra el siguiente texto:
tooltip.find(".ui-tooltip-content").html(content);
y pon encima eso
content=content.replace(//</g,''<'').replace(//>/g,''>'');
Espero que esto también funcione para ti.
El 
 combinado con el estilo espacio en blanco: línea previa; 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;
}
Aquí se encuentra: ¿Cómo hacer que la información sobre herramientas de arranque de Twitter tenga múltiples líneas?
Give /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 el código subyacente.
Espero que esto funcione para usted
La solución para mí fue http://jqueryui.com/tooltip/ :
Y aquí el código (la parte del script que hace <br/> Works es "content:"):
CABEZA 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
Lo encontré. Se puede hacer simplemente haciendo esto
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
Más que Jquery UI 1.10 no es compatible con el uso de la etiqueta html dentro del atributo de título porque no es válido html.
Entonces, la solución alternativa es usar la opción de contenido de información sobre herramientas. Consulte - http://api.jqueryui.com/tooltip/#option-content
Para mí, una solución de dos pasos (combinación de formatear el título y agregar el estilo) funcionó de la siguiente manera:
1) Formatea el title attrbiute:
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
2) Agregue este estilo al elemento de tips :
white-space: pre-line;
Probado en IE8, Firefox 22 y Safari 5.1.7.
Solo agrega un atributo de datos
data-html = "true"
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> " </i>
Ha funcionado en la mayoría de los plugins de información sobre herramientas que he probado hasta ahora.
Solo agregue data-html = "true"
<a href="#" title="Some long text <br/> Second line text /n Third line text" data-html="true">Hover me</a>
Solo usa el código de entidad 
 para un salto de línea en un atributo de título.
Utilizar .html () en lugar de .text () funcionó para mí. Por ejemplo
.html("This is a first line." + "<br/>" + "This is a second line.")
Utilizar

No debería haber ninguno; personaje.
es posible agregar saltos de línea dentro de información sobre herramientas HTML nativos simplemente haciendo que el atributo de título se distribuya en varias líneas.
Sin embargo, recomendaría usar un plugin de jQuery tooltip como Q-Tip: http://craigsworks.com/projects/qtip/ .
Es simple de configurar y usar. Alternativamente, también hay muchos complementos gratuitos de sugerencias de herramientas javascript.
editar: corrección en la primera declaración.
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 );
},
use 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 + " ";
$("#item").append(''<i title="In favorite users: '' + favTitle + ''">Favorite</i>'');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>
<br /> funcionó si estás usando qTip
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:
- configuración
- controlador
- 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 here
/n
con el estilo
.tooltip-inner {
white-space: pre-line;
}
trabajó para mi.