web-dev-qa-db-fra.com

Alignement du texte dans bootstrap info-bulle

L'info-bulle Bootstrap aligne le texte au milieu par défaut. Je voudrais m'aligner à gauche. Existe-t-il une bonne façon de le faire dans HTML, au lieu de modifier le fichier CSS?

Voici mon exemple de code:

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

J'ai déjà essayé mais ça n'a pas marché:

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

Avez-vous essayé celui-ci?

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

Remarque: .show est automatiquement ajouté par bootstrap une fois que l'infobulle est visible.

Bien que officiellement documenté ( source ), je ne pense pas que vous devriez inclure du code HTML dans l'attribut title de l'info-bulle. J'ai recommandé ceci:

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

Faire également référence au paragraphe par p est une mauvaise idée, car vous pourriez en avoir plusieurs dans votre document. Référez-vous plutôt à l'aide d'un identifiant:

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

Ce qui suit fonctionne bien dans Bootstrap version 2.2.2, 3.3.6 et 4:

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

lorsque vous voulez inclure du HTML dans une info-bulle en utilisant simplement bootstrap info-bulle (en utilisant data-html)

ici le code:

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

note supplémentaire, vous devez utiliser style = 'text-align: left' au lieu de simplement tag align = 'left'

4
Arief Setiabudi

Modifiez les éléments suivants dans votre bootstrap.css (ou bootstrap.min.css), fonctionne également pour la v3

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

Ajouter data-placement="left"

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Police: CSS Tooltip

0
Leandro Amarilha