Der Bootstrap-Tooltip zeigt die Implementierungsmethoden für Zeilenumbruch und Linksausrichtung an

Bei der Verwendung der Tooltip-Funktion von Bootstrap sind einige kleinere Probleme aufgetreten. Zeilenumbrüche gingen verloren und der Text wurde nicht linksbündig ausgerichtet. Dieser Artikel stellt Ihnen hauptsächlich die Lösung für die Anzeige von Zeilenumbrüchen und der Linksausrichtung im Bootstrap-Tooltip vor. Ich hoffe, dass er Ihnen helfen kann.

Ich bin heute bei der Verwendung der Tooltip-Funktion von Bootstrap auf zwei kleinere Probleme gestoßen: Es fehlen Zeilenumbrüche und der Text ist nicht linksbündig. Dann habe ich die Lösung durch Baidu und Bing gefunden.

Sehen Sie sich zunächst den Code für die Anzeige von Tooltips in Bootstrap an:

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

Beachten Sie, dass ${desc} und ${title} hier vom SpringMVC-Hintergrund übergebene Daten sind.

Dies ist der grundlegendste Code von Bootstrap Tooltip, der die beiden von mir erwähnten Probleme verursachen wird.

Zeilenumbruchproblem

Wenn wir auf einen Zeilenumbruch stoßen, denken wir zuerst daran, „n“ durch „
“ zu ersetzen. Ich habe das Gleiche getan, aber leider Dies erfolgt nicht in der Tooltip-Verwendung. Der Tooltip zeigt „
“ direkt als Text an.

Mit anderen Worten, HTML funktioniert in Tooltip nicht. Glücklicherweise habe ich das Attribut data-html gefunden, das es mir ermöglicht, HTML im Tooltip zu verwenden und „
“ zum Laufen zu bringen. Nach dem Hinzufügen von data-html="true" funktioniert der Zeilenumbruch. Siehe folgenden Code:

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

Linke Ausrichtung

Nachdem es auf HTML-Basis funktioniert, ist es viel einfacher, es linksbündig auszuführen Ausrichtung. Platzieren Sie den anzuzeigenden Inhalt in

...

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

Was auch immer der Grund sein mag, wenn

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

Verwandte Empfehlungen: 
 
 
Detaillierte Erläuterung der Tooltip-Instanz der Vue-Komponente
Detaillierte Erläuterung des Grafikcodes zur Implementierung des Tooltip-Floating-Promptbox-Effekts in nativem JavaScript
jQuery-Beispiel für die Implementierung der ToolTip-Elementpositionierungs- und Anzeigefunktion
Das obige ist der detaillierte Inhalt vonDer Bootstrap-Tooltip zeigt die Implementierungsmethoden für Zeilenumbruch und Linksausrichtung an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!