Buttons

Beispiele mit eigenen Buttons

Bootstrap CSS Beispiele

Tooltip Mehr Tooltip Buttons

Bootstrap Tooltip Beispiele mit JavaScript

Hier ein Beispiel mit einem einfachen Tooltip bei MouseOver.

Weitere Beispiel-Seite zu Bootstrap Tooltip findet Ihr hier

Für die Anleitung guckt Ihr bei: w3schools.com


Klicke hier als Popover mit Bild und Link


Dieser Link zum nächsten Block ist mit einem Tooltip nach oben versehen

zu den Buttons, hier Tooltip rechts


Hier wurde lediglich z.B. dem Link folgende Attribute hinzugefügt:

data-toggle="tooltip" title="Klick zu den Button Beispielen"

dem Popover:

title="Popover Überschrift" data-toggle="popover" data-trigger="hover" data-content="Inhalt"

gesamter Link vom Popover mit meinem Buch-Logo:

<a href="javascript:void(0);" title="Popover Überschrift" data-toggle="popover" data-trigger="focus" data-html="true" data-content="Irgendeinen Inhalt hier schreiben.<br><a href='https://www.w3schools.com/bootstrap/bootstrap_popover.asp' target='_blank' class='text-secondary'><b>Klicke zur Popover Anleitung</b></a><br>Klicke irgendwo, um Fenster zu schließen.<br><br><center><img src='http://www.mobirise-tutorials.com/PortfolioM4/assets/images/Logo-180.png' alt='Logo' title='Mobirise Tutorials' width='180' /></center>" class="text-secondary">Klicke hier als Popover mit Bild und Link</a>

und dem Button:

btn-success

und in den "Page Settings" am "End of <body> code" dieses JavaScript eingefügt.
Die erste Funktion für die Text-Links, die zweite Funktion für das Popover und die dritte Funktion für den Button:

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
        $('[data-toggle="popover"]').popover();
        $('.btn-success').tooltip({title: "Zu den Button Beispielen", animation: true, placement: "right"});
    });
</script>

Buttons mit Bootstrap CSS

Manchmal möchte man einzelne Buttons an Stellen in den Blocks verwenden, an denen von Mobirise keine Buttons vorgesehen sind. Man kann natürlich über den Code-Editor von Mobirise jederzeit und überall solche Buttons einfügen. Für eine Anleitung dazu guckt bitte bei:

holdirbootstrap.de

Unten einige "eigene" CSS-Buttons als Beispiel:

Mobirise Tutorials

Dieser Footer wurde mit dem "global" Attribut versehen
und muss somit nur einmalig in diesem Projekt geändert werden.
Das funktioniert nur bei der Menüleiste und beim Footer.