Text im Bootstrap-Tooltip ausrichten

Lesezeit: 4 Minuten

Bootstrap-Tooltip richtet Text standardmäßig mittig aus. Ich würde gerne nach links ausrichten. Gibt es eine nette Möglichkeit, dies in HTML zu tun, anstatt die CSS-Datei zu ändern?

Hier ist mein Beispielcode:

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

Ich habe es schon versucht, aber es hat nicht funktioniert:

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

Benutzer-Avatar
Tobias

Folgendes funktioniert gut in Bootstrap Version 2.2.2, 3.3.6 und 4:

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

  • Ich musste entweder verwenden !important oder .tooltip > .tooltip-inner Um dies zum Laufen zu bringen, verwende ich Bootstrap 3.3.5

    – Andreas

    13. September 2016 um 9:10 Uhr

  • das funktioniert gut für mich, mit Bootstrap 4, nein !important erforderlich

    – Reifen

    10. Februar 2020 um 7:33 Uhr

Benutzer-Avatar
Siemanko

Hast du diesen probiert?

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

Hinweis: .show wird automatisch von Bootstrap hinzugefügt, sobald der Tooltip sichtbar ist.

Obwohl offiziell dokumentiert (Quelle), denke ich nicht, dass Sie HTML-Code in das Tooltip-Titelattribut einfügen sollten. Das habe ich empfohlen:

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

Es ist auch eine schlechte Idee, auf Absatz für P zu verweisen, da Sie viele davon in Ihrem Dokument haben könnten. Verweisen Sie stattdessen über eine ID:

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

  • align=”left” ist nicht gültig @ruut.

    – Don P

    5. Mai 2014 um 17:17 Uhr

  • Um Donnys Kommentar zu verdeutlichen, verwenden Sie align="left" in einem HTML-Tag ist kein gültiges HTML5. Die HTML5-Methode ist das in dieser Antwort beschriebene CSS.

    – Ziehbeere

    6. Januar 2017 um 14:37 Uhr

  • HTML direkt im Tooltip-Titelattribut ist offiziell dokumentiert: getbootstrap.com/docs/4.0/components/tooltips

    – Gabe Hiemstra

    9. Mai 2019 um 11:02 Uhr

  • Für Bootstrap 5 kann man verwenden text-start (Anstatt von text-left Klasse von Bootstrap 4), zB <p class="text-start">Text in tooltip</p>

    – Ikarus

    8. April 2021 um 13:12 Uhr


Benutzer-Avatar
Arief Setiabudi

Wenn Sie HTML in den Tooltip aufnehmen möchten, verwenden Sie einfach den Bootstrap-Tooltip (mit Data-HTML).

hier der code:

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

Zusätzlicher Hinweis, Sie sollten stattdessen style=”text-align:left” verwenden und einfach align=’left’ taggen.

  • Hast du das vor dem Posten probiert? Funktioniert nicht mit Bootstrap Bundle 4.4.1 – Sie müssen CSS verwenden – siehe Tobias Antwort oben. Ich hatte keinen Zugriff auf das HTML, also habe ich das CSS eingefügt: $(function () { $(‘head’).append(‘

    ‘);}); Das hat bei mir funktioniert.

    – Markus B

    2. April 2020 um 12:54 Uhr


  • Fast richtig. fügen Sie einfach eine Klasse wie hinzu <span data-toggle="tooltip" data-html="true" title="<p class='text-left'>Hello again<br/> this is tooltop</p>"> und formatieren Sie es dann in CSS (für Bootstrap wird der Text standardmäßig linksbündig ausgerichtet)

    – Altin

    21. Mai 2020 um 13:44 Uhr


Fügen Sie einfach eine Klasse hinzu:

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

Bei Bootstrap wird der Text standardmäßig linksbündig ausgerichtet

Ändern Sie Folgendes in Ihrer bootstrap.css (oder bootstrap.min.css), funktioniert auch für v3

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

  • Nehmen Sie niemals Änderungen direkt an bootstrap.css vor, schreiben Sie stattdessen Ihre eigene CSS-Datei und binden Sie diese stattdessen nach der Bootstrap-Einbindung ein. Dadurch können Sie immer noch das Standardverhalten überschreiben, aber Bootstrap später aktualisieren, ohne Ihre manuellen Überschreibungen zu verlieren.

    – mtrolle

    15. Juni 2017 um 11:57 Uhr

  • Es ist immer eine schlechte Idee, Dateien zu hacken, die von einem Drittanbieter stammen. Tu es einfach überhaupt nicht – das wird dich definitiv wieder beißen. Dort Wille sei ein Update & du Wille hast deine Hacks vergessen!

    – Markus B

    2. April 2020 um 12:39 Uhr

Benutzer-Avatar
Mithsew

Ich benutze VUE. Die vorherigen Lösungen haben bei mir nicht funktioniert. Nicht einmal den Stil innerhalb des Titels verwenden. Aber mir wurde klar, dass es perfekt funktioniert, wenn ich den Stil außerhalb des Scoped-Tags setze. Es macht Sinn, schließlich befindet sich der Tooltip direkt unter dem Körper, der hierarchisch über meiner Komponente liegt

  • Nehmen Sie niemals Änderungen direkt an bootstrap.css vor, schreiben Sie stattdessen Ihre eigene CSS-Datei und binden Sie diese stattdessen nach der Bootstrap-Einbindung ein. Dadurch können Sie immer noch das Standardverhalten überschreiben, aber Bootstrap später aktualisieren, ohne Ihre manuellen Überschreibungen zu verlieren.

    – mtrolle

    15. Juni 2017 um 11:57 Uhr

  • Es ist immer eine schlechte Idee, Dateien zu hacken, die von einem Drittanbieter stammen. Tu es einfach überhaupt nicht – das wird dich definitiv wieder beißen. Dort Wille sei ein Update & du Wille hast deine Hacks vergessen!

    – Markus B

    2. April 2020 um 12:39 Uhr

Benutzer-Avatar
Leandro Amarilha

Hinzufügen 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>

Schriftart: CSS-Tooltip

  • Dies richtet nicht links aus, sondern platziert den Tooltip auf der linken Seite.

    – Stefan

    16. November 2019 um 8:23 Uhr

1245080cookie-checkText im Bootstrap-Tooltip ausrichten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy