L'info-bulle Bootstrap montre comment implémenter le retour à la ligne et l'alignement à gauche

J'ai rencontré quelques problèmes mineurs lors de l'utilisation de la fonction Tooltip de Bootstrap. Les sauts de ligne étaient perdus et le texte n'était pas aligné à gauche. Cet article vous présente principalement la solution pour afficher les sauts de ligne et l'alignement à gauche dans l'info-bulle Bootstrap. Les amis intéressés devraient y jeter un œil. J'espère que cela pourra vous aider.

J'ai rencontré deux problèmes mineurs aujourd'hui lors de l'utilisation de la fonction Tooltip de Bootstrap : les sauts de ligne sont manquants et le texte n'est pas aligné à gauche. Ensuite, j'ai trouvé la solution via Baidu et Bing.

Jetez d'abord un œil au code pour afficher l'info-bulle dans Bootstrap :

<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="res/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip();
 });
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="${desc}">${title}</button>

Notez que ${desc} et ${title} ici sont des données transmises depuis l'arrière-plan SpringMVC.

Il s'agit du code le plus basique de Bootstrap Tooltip, qui provoquera les deux problèmes que j'ai mentionnés.

Problème de saut de ligne

Lorsque nous rencontrons un saut de ligne, la première chose à laquelle nous pensons est de remplacer "n" par "
". cela n'est pas fait dans l'utilisation des info-bulles. L'info-bulle affiche directement "
" sous forme de texte.

En d’autres termes, HTML ne fonctionne pas dans Tooltip. Heureusement, j'ai trouvé l'attribut data-html, qui me permet d'utiliser du HTML dans l'info-bulle et de faire fonctionner "
". Après avoir ajouté data-html="true", le retour à la ligne fonctionne. Voir le code suivant :

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="${fn:replace(desc, newline, "<br/>")}">${title}</button>

Alignement à gauche

Après avoir fonctionné sur la base du HTML, il est beaucoup plus simple de faire à gauche. alignement , placez le contenu à afficher dans

...

.

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="<p align=&#39;left&#39;>${fn:replace(desc, newline, "<br/>")}</p>">${title}</button>

Quelle que soit la raison, si

ne fonctionne pas, il existe encore de nombreuses options :

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

Recommandations associées :

Explication détaillée de l'instance Tooltip du composant Vue

Explication détaillée du code graphique pour l'implémentation de l'effet de boîte d'invite flottante Tooltip à l'aide de JavaScript natif

JQuery Exemple d'implémentation de la fonction de positionnement et d'affichage des éléments ToolTip

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!