jquery - tooltips - Mostrar texto largo en la información sobre herramientas de Bootstrap

tooltip input bootstrap

Question

Estoy tratando de mostrar un poco de texto largo en una sugerencia de herramienta de arranque de twitter. Como puede ver en la imagen a continuación, las cosas no van a ser aplastantes. ¿Alguien tiene una solución fácil para el texto que desborda la información sobre herramientas de arranque?

EDITAR (código solicitado agregado):

En mi controlador:

<a href=''" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "'' " +
((blTruncated) ? "class=''auto-tooltip'' title=''" + productRow.ProductName.Replace("''", "") : "") + "''>" +
productName + "</a>

En mi vista:

$(''.auto-tooltip'').tooltip();

Answer 1

Como alternativa al estilo del .tooltip-inner en una hoja de estilos, puede agregar estilos directamente a la tooltip modificando la plantilla de la información sobre herramientas.

Probablemente esta no sea una buena idea en la mayoría de los casos, ya que aplicaría estilos directamente al elemento, pero vale la pena señalar que esto es posible en los pocos casos donde esta es la única opción o por alguna razón es la mejor opción.

$(selector).tooltip({
title: "Lorem ipsum ...",
template: ''<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>'',
});

O, como un atributo:

<span
data-toggle="tooltip"
title="Lorem ipsum ..."
data-template=''<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>''
>Some abbreviation</span>
$(function(){
$(''[data-toggle="tooltip"]'').tooltip();
});

opción de template :

HTML base para usar al crear la información sobre herramientas.

El title la información sobre herramientas se .tooltip-inner en .tooltip-inner .

.tooltip-arrow se convertirá en la flecha de la información sobre herramientas.

El elemento de envoltura más externo debería tener la clase .tooltip .

El valor predeterminado es:

''<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>''

Como alternativa, puede agregar su propia clase a la plantilla y darle un estilo a la clase personalizada.

$(selector).tooltip({
title: "Lorem ipsum ...",
template: ''<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>'',
});
.my-custom-tooltip {
max-width: none;
}

Answer 2

Como se insinuó en la documentación , la forma más fácil de asegurarse de que su información sobre herramientas no se ajusta para nada es usar

 .tooltip-inner {
max-width: none;
white-space: nowrap;
}

Con esto, no tiene que preocuparse por los valores de las dimensiones ni nada de eso. El problema principal es que si tienes una línea de texto muy larga, simplemente saldrá de la pantalla (como puedes ver en el ejemplo de JSBin ).

Answer 3

No estoy seguro de tu código,
aquí hay un ejemplo con un valor largo de punta de herramienta:

Elemento:

 <a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a>

Js:

$(document).ready(function () {
$("a").tooltip({
''selector'': '''',
''placement'': ''top'',
''container'':''body''
});
});

Css:

/*Change the size here*/
div.tooltip-inner {
max-width: 350px;
}

Demostración: en JsBin.com

Answer 4

Puede usar esta fuente para obtener mejores resultados:

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