Bootstrap Tooltip

Ein Beispiel zum Darstellen von Hinweisen und Bildern im Text

Geht mit der Maus über alle farbigen Texte, um die Tooltip Hinweise zu sehen

Bootstrap Tooltip

Ein Beispiel für die Tooltip Funktion, mit der man z.B. sehr einfach auch Bilder in einem laufendem Text darstellen könnte.

Für eine Anleitung zum Tooltip guckt bitte hier: w3schools.com

Weitere Infos findet Ihr auch meiner Seite zum Tooltip

Bitte beachtet, dass in Bootstrap 5 alles anders ist



In diesem Text setze ich einige Links zu Bildern. Gehe mit der Maus über das Wort Enten oder auch über Fliege. Weiter geht es zum Bild von einer Fruchthülle und einer Libelle aus dem Garten. Der Luchs ist ein Waldbewohner. Leider ist es mr bisher nicht gelungen die maximale Größe vom Tooltip-Fenster von 250px größer zu bekomen.


Beispiel Tooltip JavaScript. Dieses Script kommt in die Seiteneinstellungen "End of <body> Tag":

<!-- Tooltip Script -->
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover({placement: "top"});
});
</script>



Beispiel für den Tooltip mit Hinweis-Text. Ihr setzt also einen Link ohne Ziel mit dem Wert

javascript: void();

oder einen Link mit Ziel und der Funktion, inklusive der Anzeige (title) im Tooltip Fenster, über den Code Editor ein.

data-toggle="tooltip" title="Bootstrap JavaScript Tooltip"

Zusammen sieht das dann so aus:

<a href="javascript: void();" data-toggle="tooltip" title="Bootstrap JavaScript Tooltip">Bootstrap Tooltip</a>



Beispiel für den Tooltip mit Bild. Ihr setzt also einen Link ohne Ziel mit dem Wert

javascript: void();

oder einen Link mit Ziel und der Funktion data-toggle="popover" inklusive der Anzeige aller "data" Parameter und des Bildes mit einer maximalen Breite von 250px (oder eben kleiner). Für Klick wechselt Ihr "hover" in "focus" aus.

data-toggle="popover" data-trigger="hover" data-html="true" data-content="<img src='http://www.mobirise-tutorials.com/BusinessM4/images/Enten.jpg' alt='Bild' width='250px'/>"

Zusammen sieht das dann so aus:

<a href="javascript:void(0);" data-toggle="popover" data-trigger="hover" data-html="true" data-content="<img src='http://www.mobirise-tutorials.com/BusinessM4/images/Enten.jpg' alt='Bild' width='250px'>">Enten</a>

Adresse

Schöne Strasse 1, Berlin

Deutschland