2

Estoy intentando que en un Tooltip pueda haber un salto de línea.

<i class="fa fa-group" data-toggle="tooltip" data-placement="bottom" 
    data-original-title="--- Aquí hago un for pero los valores que me devuelve me los pone seguidos.">
</i>

He intentado con /n y <br>, y muchas más cosas, pero no hace el salto de línea en el Tooltip.

Dentro del title como puse en el código, hice un for para que me recorriera una lista y me mostrara unos resultados, pero cuando me los muestra tengo que separarlos con ---, porque de lo contrario me los pone seguidos, por lo que quiero que me salgan uno debajo del otro.

4
  • Livian por favor desarrolla tu pregunta a manera de expliques que sucede cuando haces qué y qué esperas que suceda. ¿Qué has intentado?
    – Solrac
    Commented el 18 may. 2017 a las 23:25
  • he intentado con /n <br> y muchas mas pero no hace el salto de linea en el tooltip, dentro del tiitle como puse en el codigo hice un for para que me recorriera una lista y me mostrara unos resultados, pero cuando me los muestra tengo que separarlos con --- porque sino me los pone seguidos, por lo que quiero que me salgan uno debajo del otro, saludos Commented el 19 may. 2017 a las 0:00
  • 1
    Te damos la Bienvenida a StackOverflow en Español. Te invito a que pases por el Recorrido y leas el artículo Cómo Preguntarpara que tu pregunta sea bien recibida.
    – FederHico
    Commented el 19 may. 2017 a las 0:51
  • @LivanRamirezBrito van a eliminar tu pregunta si no la formulas correctamente, así que tomate tu tiempo. saludos. Commented el 19 may. 2017 a las 2:26

2 respuestas 2

3

\n

Insertando un salto de línea directamente en el texto del tooltip. El caracter no debe estar escapado, sino que debería ser efectivamente el literal "\n".

En la documentación de Atributos Globales > title, se menciona:

El atributo title puede contener varias líneas . Cada U+000A LINE FEED (LF) insertada representa una línea nueva .

Ejemplo:

<i title="Valor 1
Valor 2
Valor 3
Valor 4">
         Texto
 </i>


&#10;

Es la entidad HTML para el caracter \n (ASCII 10). Es una forma de insertar un salto de línea en un tooltip.

Ejemplo

<i title="Valor 1&#10;Valor 2&#10;Valor 3&#10;Valor 4">
         Texto
 </i>



En Bootstrap, con white-space: pre-wrap

Usando Bootstrap, es necesario asignar cómo tratar los espacios en blanco mediante CSS.

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

Ejemplo:

//Inicializamos el tooltip
$("#ejemplo").tooltip();
.tooltip-inner {
    white-space: pre-wrap;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<!-- HTML -->
<i id="ejemplo"
    class="fa fa-group" data-toggle="tooltip" data-placement="bottom" 
    data-original-title="aqui hago un for
pero los valores que me devuelve
me los pone en diferentes líneas">
  Texto
</i>

2

La forma mas simple y efectiva de poner saltos de linea es agregar el comando data-html="true" y con eso el tootip ya soporta comandos html como <br>

2
  • Por favor lee Cómo responder
    – user128299
    Commented el 31 jul. 2019 a las 20:03
  • Es de resaltar que esta es la forma más simple de hacerlo pero sólo si usas Bootstrap, en versiones 3 y 4. Por favor sigue la recomendación de @Aprendiz y mejora tu respuesta haciendo clic en Editar Commented el 31 jul. 2019 a las 21:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.