Wiki

Clone wiki

User Apps / HTML-UI / Schönere Tooltips

Mit folgendem Code in eurer HTML-Datei werden die Tooltips von HTML-Elementen schöner/besser dargestellt.

Damit ein Tag/Element einen Tooltip hat muss man ihm ein title-Attribut geben.

Fast alle HTML-Elemente unterstützen das title-Attribut.

Im folgenden Beispiel der <style>-Teil ist optional und dient der Verschönerung der Tooltips.

Für weitere Infos was man damit noch alles tolles machen kann, siehe hier: https://jqueryui.com/tooltip/

#!HTML

<html>
    <head>
        <script src="/apps/api/jquery.min.js"></script>
        <script>
            $(document).tooltip();
        </script>
        <style type="text/css">
            .ui-tooltip
            {
                padding: 5px 10px;
                font: bold 14px "Helvetica Neue", Sans-Serif;
                background-color: #FFB;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div title="Ein toller Tooltip">Zeig mit der Maus auf mich.</div>
        <div title="Noch ein Tooltip, aber etwas länger diesmal.">Nein! Zeig auf mich!</div>
    </body>
</html>

Updated