html - horizontal - centrar texto en un div

Alinear texto en la herramienta de ayuda bootstrap

Question

La información sobre herramientas Bootstrap alinea el texto con el medio de forma predeterminada. Me gustaría alinearme a la izquierda. ¿Hay alguna manera agradable de hacer esto dentro de HTML, en lugar de modificar el archivo CSS?

Aquí está mi código de muestra:

<p rel="tooltip" title="Text in tooltip I want to align">Hover over here</p>

<script type="text/javascript">
   $(document).ready(function () {
      $("p").tooltip();
   });
</script>

Ya lo he intentado pero no funcionó:

<p rel="tooltip" data-html="true" title="<p align=''left''>Text in tooltip</p>">Hover over here</p>

Answer 1

¿Has probado este?

<style> 
 .tooltip > p {
   text-align:left;
 }
</style>

Además, no creo que incluir código HTML en el título de información sobre herramientas. Lo que debes hacer es:

$("p").tooltip({
  html: true,
  title: ''<p>Text in tooltip</p>''
}); 

También es una mala idea referirse al párrafo por p, ya que puede tener muchos de ellos en su documento. Referir por una identificación en su lugar:

 <p id="myparagraph"> Hover over here </p>
 $("#myparagraph")

Answer 2

Cambie lo siguiente en su bootstrap.css (o bootstrap.min.css), funciona también para v3

.tooltip-inner{
...
text-align:center; //change to left
...
}

Answer 3

Esto siguiente funciona bien en Bootstrap versión 2.2.2, 3.3.6 y 4:

.tooltip-inner {
    text-align: left;
}

Answer 4

cuando desee incluir html en la información sobre herramientas usando solo la herramienta de ayuda de arranque (utilizando datos-html)

aquí el código:

<span data-toggle="tooltip" data-html="true" title="<p style=''text-align:left''>Hello again<br/> this is tooltop</p>">

nota adicional, debe usar style = ''text-align: left'' en lugar de simplemente tag align = ''left''