Tooltips

Überall nutzbare Tooltips

Seit 2014 werden die Tooltips (Infofenster) per CSS erzeugt bzw. angezeigt. Es gibt drei Varianten davon, wobei die ersten beiden mit einer class und einem <span> eingebunden werden und die dritte dann über ein data-Attribut.

Das CSS der ersten beiden Varianten

Seit dem 12. Oktober 2016 sind viele CSS-Definitionen der ersten beiden Varianten identisch.

Quelltext CSS
       /* kleine Hilfsfenster bei Verweisen in einem  // PHP-Version */

/* Tooltips mit <span> - helpilo mit span im entsprechenden Tag und helpilo2 mit dem Tag danach */
.helpilo,
.helpilo2 {
                position:relative;
}

.helpilo {
                outline:none;
                text-decoration:none;
                border-bottom:dotted 2px blue;
}

.helpilo2 {
                width:35em;
}

/* Anpassungen bei bestimmten Tag */
td .helpilo {
                display:block;
                /*width:100%;*/
}


.helpilo > span,
.helpilo2 a + span,
.helpilo2 + span.io {
                position:absolute;
                top:1.5em;
                right:0;
                /* verstecken per ganz durchsichtig und negativem z-index. das zweite, damit Tooltip nicht dort ausgelöst wird, wo es später erscheinen soll, sondern nur beim Link */
                opacity:0;
                z-index:-1;
                border:1px solid #CFB57C;
                border-radius:5px;
                background: #FBF5E6;
                background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
                background: -webkit-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                background: linear-gradient(to bottom, #FBF5E6 0%, #FFFFFF 100%);
                -webkit-box-shadow: 2px 2px 2px #999;
                -moz-box-shadow: 2px 2px 2px #999;
                -o-box-shadow: 2px 2px 2px #999;
                box-shadow: 2px 2px 2px #999;
                color:black;
                padding:0.5em;
                min-width:4.5em;
                max-width:35em;
                /*-webkit-transition:all 0.5s; Safari zeigt denn keinen Text im Kasten an und platziert falsch. */
                -webkit-transition:left 0.5s, right 0.5s;
                -moz-transition:all 0.5s;
                -o-transition:all 0.5s;
                transition:all 0.5s;
}

.helpilo > span {
                width:200px;
}

/* Anpassungen bei bestimmten Tags */
                                /* Ergänzung für code */
code.helpilo > span {
                    font-family:"Times New Roman", serif;
}
th .helpilo > span {
                     font-weight:normal;
}


.helpilo:hover > span,
.helpilo2 a:hover + span,
.helpilo2:hover span,
.helpilo2:hover + span.io {
                /* wieder sichtbar und oberhalb der Seitenebene */
                opacity:1;
                z-index:2;
}

/* Anpassungen beim Hovern */
.helpilo:hover > span {
                                        text-decoration:none;
                                        overflow: visible;
                                        top:30px;
                                        right:-180px;
                                        display: inline;
}
/* Ergänzung für a */
a.helpilo:hover {
                                        border-bottom:2px solid #006666;
}

.helpilo span b:after,
.helpilo span b:before,
.helpilo2 a + span b:after,
.helpilo2 a + span b:before {
                                        bottom: 100%;
                                        left: 50%;
                                        border: solid transparent;
                                        content: " ";
                                        height: 0;
                                        width: 0;
                                        position: absolute;
                                        pointer-events: none;
}

.helpilo span b:after,
.helpilo2 a + span b:after {
                                        border-color: rgba(251, 245, 230, 0);
                                        border-bottom-color: #FBF5E6;
                                        border-width: 10px;
                                        margin-left: -10px;
}

.helpilo span b:before,
.helpilo2 a + span b:before {
                                        border-color: rgba(207, 181, 124, 0);
                                        border-bottom-color: #CFB57C;
                                        border-width: 11px;
                                        margin-left: -11px;
}

/* andere Position des Dreiecks bzw. Tooltip */
                /* Infofenster mit links platziertem Dreieck  */
                .helpilo.liva > span {
                                        top:-50%;
                                        right:auto;
                                        /*left:-155px;*/
                                        left:100px;
                }

                                .helpilo.liva span b:after,
                                .helpilo.liva span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        bottom:auto;
                                        left:auto;
                                        /* Für links platziertes Dreieck */
                                        right:100%;
                                        top: 50%;
                                }

                                .helpilo.liva span b:after {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für links platziertes Dreieck */
                                        border-right-color: #FBF5E6;
                                        margin-top: -10px;
                                }
                                .helpilo.liva span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für links platziertes Dreieck */
                                        border-right-color: #CFB57C;
                                        margin-top: -11px;
                                }

                /* Infofenster mit rechts platziertem Dreieck  */
                .helpilo.dekstra > span {
                                        top:-50%;
                                        right:100px;
                }

                                .helpilo.dekstra span b:after,
                                .helpilo.dekstra span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        bottom:auto;
                                        /* Für rechts platziertes Dreieck */
                                        left: 100%;
                                        top: 50%;
                                        -webkit-filter:drop-shadow( 2px 2px 2px rgba(0,0,0,.5));
                                        -moz-filter:drop-shadow( 2px 2px 2px rgba(0,0,0,.5));
                                        -o-filter:drop-shadow( 2px 2px 2px rgba(0,0,0,.5));
                                        filter:drop-shadow( 2px 2px 2px rgba(0,0,0,.5));
                                }

                                .helpilo.dekstra span b:after {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für rechts platziertes Dreieck */
                                        border-left-color: #FBF5E6;
                                        margin-top: -10px;
                                }
                                .helpilo.dekstra span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für rechts platziertes Dreieck */
                                        border-left-color: #CFB57C;
                                        margin-top: -11px;
                                }

Wegen Problemen mit dem Schatten beim rechts platziertem Dreieck wurde am 13. Oktober 2016 folgender Code ergänzt und am 14. Oktober 2016 etwas korrigiert:

Quelltext CSS
/* inspiriert von https://codepen.io/ryanmcnz/pen/JDLhu */
@supports (transform:rotate(-45deg)) or (-webkit-transform:rotate(-45deg)) {
                                .helpilo.dekstra span b:before {
                                                        border-color: transparent #CFB57C #CFB57C transparent;
                                                        -webkit-transform: translate(-8px,3px) rotate(-45deg);
                                                        -ms-transform: translate(-8px,3px) rotate(-45deg);
                                                        transform: translate(-8px,3px) rotate(-45deg);
                                                        border-width:8px;
                                                        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
                                                        -webkit-filter:none;
                                                        -moz-filter:none;
                                                        -o-filter:none;
                                                        filter:none;
                                }
}                /* Ende @supports */

Erste Variante

Bei der ersten Variante wird der <span> mit dem Infotext in das Element (Link oder Abkürzung) eingefügt, zu dem es gehört.

Quelltext HTML
<abbr class="helpilo liva">T<span><b></b>Die abgerundeten Ecken und die Schatten funktionieren dort nicht, ebenso wie die allmählichen Übergänge.</span></abbr>
<abbr class="helpilo dekstra">T<span><b></b>Die abgerundeten Ecken und die Schatten funktionieren dort nicht, ebenso wie die allmählichen Übergänge.</span></abbr>

Das Ergebnis ist in der zweiten Tabelle in "Getestete Browser" zu sehen.

Variante <a> <abbr> <code> Beispiel 1 Beispiel 2
Link im <span> N J J TDie abgerundeten Ecken und die Schatten funktionieren dort nicht, ebenso wie die allmählichen Übergänge. TDie abgerundeten Ecken und die Schatten funktionieren dort nicht, ebenso wie die allmählichen Übergänge.

Das Element <b></b> läßt mit Hilfe von CSS das typische dreieckige Anhängsel einer Sprechblase erscheinen.

Zweite Variante

Bei der zweiten Variante wird der <span> nach dem Element (Link), zu dem es gehört eingefügt. Das ist nur sinnvoll, wenn der Infotext selbst einen Link enthält. Außerdem wird die class dem umgebenen Element (im Beispiel p) zugewiesen.

Quelltext HTML
<p class="helpilo2">oder im <a href="../ligoj/links2.html">Weltnetz</a><span><b></b>Gefunden unter <a rel="external" href="http://www.ideesamkeit.de/Worterfindungen/worterfindungen.html">Worterfindung - Neuwort - Neologismus: Das Wörterbuch der Worterfindungen - lustige Wörter, Deutsch, neusame Fachbegriffe - German neologisms et neologisme allemand - bei: Ideesamkeit - Fremdwörter? Awa. Neusame Wörter.:</a></span></p>

Das Ergebnis ist im Abschnitt "Kurse" auf der Infoseite zum Verein zu sehen.

Variante <p> Beispiel
Link im <span> J

oder im WeltnetzGefunden unter Worterfindung - Neuwort - Neologismus: Das Wörterbuch der Worterfindungen - lustige Wörter, Deutsch, neusame Fachbegriffe - German neologisms et neologisme allemand - bei: Ideesamkeit - Fremdwörter? Awa. Neusame Wörter.:

Statt <p> ist jedes andere Element erlaubt, welches einen Link (<a>) enthalten darf. Außerdem kann sogar im Element <span> ein Link stehen, weil ja <span> außerhalb des Links (<a>) steht. Seit dem 15. Dezember 2014 funktioniert sogar das kleine Dreieck, wie es bei Sprechblasen üblich ist. Seit dem 11. Oktober 2016 ist die Browserkompatiblität dafür besser.

Dritte Variante

Bei der dritten Variante ist keine spezielle class bei dem Element nötig, bei dem der Infotext erscheinen soll. Dort steht dann statt dessen ein data-helpilo-Attribut.

Quelltext HTML
<abbr data-helpilo="Die Animation fehlt.">T</abbr>

Das Ergebnis erscheint in der zweiten Tabelle in "Getestete Browser".

Statt <abbr> ist jedes Element möglich, welches einen schließenden Tag (z.b. </abbr>) hat.

  Beispiel
Variante mit data-Attribut T

Das CSS sieht so aus:

Quelltext CSS
/* Variante mit Text im data-Attribut */
/* nach https://bitbucket.org/cbavota/css3-tips/get/master.zip */
[data-helpilo] {
                position:relative;
                width:35em;
                outline:none;
                text-decoration:none;
                border-bottom:dotted 2px blue;
                }


[data-helpilo]:after,
[data-helpilo]:before {
                position: absolute;
                /* verstecken per ganz durchsichtig  */
                opacity:0;
                z-index:1;
                top:1.7em;
                right:0;
                /*-webkit-transition:all 0.5s; Safari zeigt denn keinen Text im Kasten an und platziert falsch. */
                -webkit-transition:left 0.5s, right 0.5s;
                -moz-transition:top 0.5s;
                -o-transition:top 0.5s;
                transition:top 0.5s;
                /* Bei Benutzung eines Tooltips in einer Tabellenüberschrift o.?. */
                font-weight:normal;
                /* Bei code als Tag */
                font-family: Arial;
                font-size: 12px;
                pointer-events: none;
}
[data-helpilo]:before {
                margin-right:-0.5em;
                /*top:-1em;
                top:-0.1em;*/
                content:"";
                width:0;
                height:0;
                /* Spitze zeigt nach oben */
                border-color: transparent transparent #FBF5E6 transparent;
                border-width: 15px;
                border-style: solid;
}

[data-helpilo]:after {
                content:attr(data-helpilo);
                min-width:30em;
                text-align:left;
                border:1px solid #CFB57C;
                border-radius:5px;
                background: #FBF5E6;
                background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
                background: -webkit-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                background: linear-gradient(to bottom, #FBF5E6 0%, #FFFFFF 100%);
                -webkit-box-shadow: 2px 2px 2px #999;
                -moz-box-shadow: 2px 2px 2px #999;
                -o-box-shadow: 2px 2px 2px #999;
                box-shadow: 2px 2px 2px #999;
                color:black;
                padding:0.5em;
                z-index:1;
                text-align:left;
}
abbr.schmal:after {
                min-width:15em;
}
code[data-helpilo]:after {
                top:1.3em;
}

[data-helpilo]:hover:after,
[data-helpilo]:hover:before {
                /* wieder sichtbar. pointer-events hier nötig, damit das Tooltip bei der Mausbewegung vom Link aufs Tooltip nicht verschwindet */
                opacity:1;
                pointer-events: auto;
}
[data-helpilo]:hover:after {
                margin-right:-1em;
}

[data-helpilo].liva:hover:after,
[data-helpilo].liva:hover:before {
                left:0;
                right:auto;
}

[data-helpilo].liva:hover:after {
                margin-left:-1em;
}
[data-helpilo].liva:hover:before {
                margin-left:-0.5em;
}
/* Per Jquery angehängtes span formatieren */
[data-helpilo]:hover span.io {
                 /*width:100%;*/
                 min-width:30em;
                 height:0.8em; /* Vorsicht, daß die Links im :after nicht überlappt werden! */
                 content:" ";
                 z-index:1;
                 position:absolute;
                 top:15px;
                 right:-2px;
                 /*border:1px dotted grey;*/
}

abbr.schmal:hover span.io {
                 min-width:15em;
}

/* Anpassung in Tabellenzellen */
td [data-helpilo] {
                display:block;
                width:auto;
                text-align:center;
                /*width:100%;*/
}


/* Browser mit transform sollen dieses für das Dreieck nutzen, so daß dort auch ein Border möglich wird */
@supports (transform:rotate(45deg)) or (-webkit-transform:rotate(45deg)) {
                [data-helpilo]:before {
                                /*top:19px;                        */
                                top:14px;
                }
         /* Anpassung in Tabellenzellen */
        td [data-helpilo]:before,
                th [data-helpilo]:before        {
                                 top:14px;
        }
        code[data-helpilo]:before        {
         top:8px;
                }

        [data-helpilo]:hover:before {
                                /*transform:translateX(-50%) rotate(45deg);*/
                                -webkit-transform:rotate(45deg);
                                transform:rotate(45deg);
                                background: #FBF5E6;
                                /*background: #FBF5E6;
                                background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
                                background: -webkit-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                                background: linear-gradient(to bottom, #FBF5E6 0%, #FFFFFF 100%);*/
                                border:1px solid #CFB57C;
                                border-bottom:none;
                                border-right:none;
                                width:15px;
                                height:15px;
                                /*top:.4em;*/
                                z-index:2;
        }

}  /* Ende @supports */

Seit dem 29. Juli 2016 funktioniert sie sogar im Internet Explorer 7, weil ein Javascript sie faktisch in die erste Variante "übersetzt".

Zusätzliche Klassen

Bei der ersten und dritten Variante kann class mit dem Wert liva angegeben werden, so daß das Tooltip an einer anderen Stelle erscheint.

Im RSS-feed genutzte Tooltips

Seit dem 10. Juni 2016 haben die Tooltips in der Fußzeile ein schöneres Dreieck, weil sie endlich einen eigenen Border haben. Aber seit dem 9. Oktober 2016 wird dafür nicht mehr transform verwendet.

Hier also das genutzte CSS:

Quelltext CSS
            /* Tooltips beim RSS-Feed */
            footer[role="contentinfo"] ul li#impressum + li a {
                   position:relative;
                   display:inline;
            }
            footer[role="contentinfo"] ul li#impressum + li a:after {
                   position:absolute;
                   display:block;
                   visibility:hidden;
                   opacity:0;
                   -webkit-transition: all 0.2s ease-in-out;
                   -moz-transition: all 0.2s ease-in-out;
                   -ms-transition: all 0.2s ease-in-out;
                   -o-transition: all 0.2s ease-in-out;
                   transition: all 0.2s ease-in-out;
                   bottom:-45%;
                   left:102%;
                   text-align:center;
                   height:auto;
                   min-width:200px;
                   padding:5px 8px;
                   padding:8px;
                   margin:25px 0 0 10px;
                   color:black;
                   background:#ccf;
                   border:1px solid blue;
                   border-radius:5px;
                   z-index:2;
                   -webkit-box-shadow: 2px 2px 2px #999;
                   -moz-box-shadow: 2px 2px 2px #999;
                   -o-box-shadow: 2px 2px 2px #999;
                   box-shadow: 2px 2px 2px #999;
                   -webkit-transform:scale(0);
                   transform:scale(0);
            }

            footer[role="contentinfo"] ul li#impressum + li abbr:after,
            footer[role="contentinfo"] ul li#impressum + li abbr:before {
                                        right: -15%;
                                        top: 50%;
                                        border: solid transparent;
                                        content: " ";
                                        height: 0;
                                        width: 0;
                                        position: absolute;
                                        visibility:hidden;
                                        opacity:0;
                                        z-index:3;
            }
            footer[role="contentinfo"][lang="eo"] ul li#impressum + li abbr:after,
            footer[role="contentinfo"][lang="eo"] ul li#impressum + li abbr:before {
                                    right:-16.5%;
            }
            footer[role="contentinfo"]:not([lang]) ul li#impressum + li abbr:after,
            footer[role="contentinfo"]:not([lang]) ul li#impressum + li abbr:before {
                                        right:-9%;
            }


            footer[role="contentinfo"] ul li#impressum + li abbr:after {
                                        border-color: rgba(204, 204, 255, 0);
                                        border-right-color: #CCF;
                                        border-width: 10px;
                                        margin-top: -10px;
            }
            footer[role="contentinfo"] ul li#impressum + li abbr:before {
                                        border-color: rgba(0, 0, 255, 0);
                                        border-right-color: #0000FF;
                                        border-width: 11px;
                                        margin-top: -11px;
            }

            /* Unterschiedliche Texte je nach der Sprache bzw. den Sprachen der Seite */
            footer[role="contentinfo"][lang="de"] ul li#impressum + li a:after {
                   content:"Der RSS-Feed kann hier abonniert werden.";
            }
            footer[role="contentinfo"][lang="eo"] ul li#impressum + li a:after {
                   content:"La RSS-fluo povas esti abonata \0109i tie.";
            }
            /* zweisprachig mit Zeilenumbruch */
            footer[role="contentinfo"]:not([lang]) ul li#impressum + li a:after {
                   content:"Der RSS-Feed kann hier abonniert werden. \A La RSS-fluo povas esti abonata \0109i tie.";
                   white-space:pre;
            }


            footer[role="contentinfo"] ul li#impressum + li a:hover:after,
            footer[role="contentinfo"] ul li#impressum + li a:focus:after,
            footer[role="contentinfo"] ul li#impressum + li a:hover abbr:after,
            footer[role="contentinfo"] ul li#impressum + li a:hover abbr:before,
            footer[role="contentinfo"] ul li#impressum + li a:focus abbr:after,
            footer[role="contentinfo"] ul li#impressum + li a:focus abbr:before {
                   visibility:visible;
                   opacity:1;
            }
            footer[role="contentinfo"] ul li#impressum + li a:hover:after,
                        footer[role="contentinfo"] ul li#impressum + li a:focus:after {
                                   -webkit-transform:scale(1);
                                   transform:scale(1);
                        }


            /* Ende der Tooltips fürs RSS-Feed */

Tooltip in Bildergalerien bzw. auf der Startseite

Sogar bei Bildern in Galerien und bei einem Bild auf den Startseiten ist die Beschreibung als Tooltip formatiert.

Das umgebende <figure>-Tag hat folgende CSS-Formate:

Quelltext CSS
           .galerio figure {
                             display: table-cell;
                             margin:0 auto;
                             text-align: center;
                             position:relative;
                             z-index:1;
           }

           figure.live.helpoteksto {
                             position:relative;
                             z-index:1;
                             margin-right:0.8em;
           }

Damit das <figcaption>-Tag formatierbar ist als unabhängig platzierbares Element, ist position:relative nötig beim umgebenden <figure>-Tag.

Hier also die gemeinsamen Basisformate für das <figcaption>-Tag:

Quelltext CSS
           .galerio figure figcaption,
           figure.live.helpoteksto figcaption {
                            position:absolute;
                            top:auto;
                            /*left:0; wird im K-Meleon 74 und anderen aelteren Geckos vermurxt */
                            left:auto;
                            /* Verschiebung des Tooltips nach links, weil es per left nicht anders klappt */
                            margin-left:-0.5em;
                            padding:0 0.3em;
                            /*width:100%; wird im K-Meleon vermurxt */
                            width:106px;
                            z-index:2;
                            opacity:0;
                            -moz-box-sizing:border-box;
                            box-sizing:border-box;
                            color: #000000;
                            opacity:0;
                            -webkit-transition:all 500ms;
                            transition:all 500ms;
                            -webkit-transform:scale(0.5);
                            -ms-transform:scale(0.5);
                            transform:scale(0.5);
                            pointer-events: none;
                            <?=$fongradiento?>
                            border: 1px solid #CFB57C;
                            -webkit-border-radius:5px;
                            border-radius:5px;
                            -webkit-box-shadow: 2px 2px 2px #999;
                            -moz-box-shadow: 2px 2px 2px #999;
                            box-shadow: 2px 2px 2px #999;
           }

Das oben sichtbare position:absolute; ermöglicht eine unabhängige Platzierung des Elements in Bezug zum darum stehenden Tag. Die Eigenschaft opacity: mit dem Wert 0 macht alles gänzlich durchsichtig, so daß es nich sichtbar ist.

Um das Tooltip mit hover und focus anzuzeigen, wird folgendes benutzt:

quelltext CSS
           .galerio figure:hover figcaption,
           figure.live.helpoteksto:hover figcaption,
           .galerio figure a:focus + figcaption,
           figure.live.helpoteksto a:focus + figcaption {
                            opacity:1;
                            -webkit-transform:scale(1);
                            -ms-transform:scale(1);
                            transform:scale(1);
                   }

Für das Dreieck ist folgendes nötig:

Quelltext CSS
           /* inspiriert von http://cssarrowplease.com/ */
           .galerio figure figcaption:after,
           .galerio figure figcaption:before,
           figure.live.helpoteksto figcaption:after,
           figure.live.helpoteksto figcaption:before {
                            bottom: 100%;
                            left: 50%;
                            border: solid transparent;
                            content: " ";
                            height: 0;
                            width: 0;
                            position: absolute;
                            }
           .galerio figure figcaption:after,
           figure.live.helpoteksto figcaption:after {
                            border-color: rgba(251, 245, 230, 0);
                            border-bottom-color: #FBF5E6;
                            border-width: 15px;
                            margin-left: -15px;
                            }
           .galerio figure figcaption:before,
           figure.live.helpoteksto figcaption:before {
                            border-color: rgba(207, 181, 124, 0);
                            border-bottom-color: #CFB57C;
                            border-width: 16px;
                            margin-left: -16px;
                            }

                        .galerio figure > figcaption:after,
                        .galerio figure > figcaption:before {
                                 /* Hälfte der Breite von figure (siehe oben) plus halbe Breite des Dreiecks */
                                 left:60px; /* für alte Browser ohne calc */
                                 left:calc((100px + 2em + 2px)/2 + 8px);
}
                        .galerio figure > figcaption.live:after,
                        .galerio figure > figcaption.live:before {
                                 left:auto;
                                 /* Hälfte der Breite von figure (siehe oben) minus halbe Breite des Dreiecks */
                                 right:60px; /* für alte Browser ohne calc */
                                 right:calc((100px + 2em + 2px)/2 - 10px);
                        }
                        .galerio figure > figcaption.live:after {
                                 left:auto;
                                 /* Hälfte der Breite von figure (siehe oben) minus halbe Breite des Dreiecks */
                                 right:61px; /* für alte Browser ohne calc */
                                 right:calc((100px + 2em + 2px)/2 - 9px);
                        }

Dreiecke am Rand

Von den Dreiecken am Rand eines Tooltips sind zwei Varianten möglich, nämlich eine mit border und eine mit transform:rotate.

Die ersten beiden Varianten der Tooltips nutzen nur border, während die dritte auch transform nutzt.

Nur border

Erste Variante

Bei der ersten Variante der Tooltips ist der Code für das Dreieck dreiteilig. Der größe Teil enthält alle Formate, die immer gelten sollen, während die beiden folgenden Teile den Hintergrund bzw. Rand des Dreiecks definieren.

Quelltext CSS
                                .helpilo span b:after,
                                .helpilo span b:before {
                                        bottom: 100%;
                                        left: 50%;
                                        border: solid transparent;
                                        content: " ";
                                        height: 0;
                                        width: 0;
                                        position: absolute;
                                        pointer-events: none;
                                }

                                .helpilo span b:after {
                                        border-color: rgba(251, 245, 230, 0);
                                        border-bottom-color: #FBF5E6;
                                        border-width: 10px;
                                        margin-left: -10px;
                                }
                                .helpilo span b:before {
                                        border-color: rgba(207, 181, 124, 0);
                                        border-bottom-color: #CFB57C;
                                        border-width: 11px;
                                        margin-left: -11px;
                                }

Bei anderer Platzierung des Tooltips über das Attribut class="liva" oder class="dekstra" werden einige Formate angepaßt:

Quelltext CSS
                /* Infofenster mit links platziertem Dreieck  */
                .helpilo.liva > span {
                                        top:-50%;
                                        right:auto;
                                        /*left:-155px;*/
                                        left:100px;
                }

                                .helpilo.liva span b:after,
                                .helpilo.liva span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        bottom:auto;
                                        left:auto;
                                        /* Für links platziertes Dreieck */
                                        top: 50%;
                                        right:100%;
                                }

                                .helpilo.liva span b:after {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für links platziertes Dreieck */
                                        border-right-color: #FBF5E6;
                                        margin-top: -10px;
                                }
                                .helpilo.liva span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für links platziertes Dreieck */
                                        border-right-color: #CFB57C;
                                        margin-top: -11px;
                                }
Quelltext CSS
               /* Infofenster mit rechts platziertem Dreieck  */
                .helpilo.dekstra > span {
                                        top:-50%;
                                        right:100px;
                }

                                .helpilo.dekstra span b:after,
                                .helpilo.dekstra span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        bottom:auto;
                                        /* Für rechts platziertes Dreieck */
                                        left: 100%;
                                        top: 50%;
                                        -webkit-filter:drop-shadow( 2px 2px 2px #999);
                                        -moz-filter:drop-shadow( 2px 2px 2px #999);
                                        -o-filter:drop-shadow( 2px 2px 2px #999);
                                        filter:drop-shadow( 2px 2px 2px #999);
                                }

                                .helpilo.dekstra span b:after {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für rechts platziertes Dreieck */
                                        border-left-color: #FBF5E6;
                                        margin-top: -10px;
                                }
                                .helpilo.dekstra span b:before {
                                        /* Defaultwerte zurücksetzen */
                                        border-bottom-color:transparent;
                                        margin-left:auto;
                                        /* Für rechts platziertes Dreieck */
                                        border-left-color: #CFB57C;
                                        margin-top: -11px;
                                }

Bei geänderter Platzierung des Dreiecks sind folgende Werte anzupassen:

gesetzte border
Position des Dreiecks Erster Positionswert
100%
Zweiter Positionswert
50%
border-color margin-
oben bottom left border-bottom-color margin-left
unten top left border-top-color margin-left
links right top border-right-color margin-top
rechts left top border-left-color margin-top

Zweite Variante

Bei der zweiten Variante der Tooltips sieht das Ganze gleich aus, denn auch dort werden für das Dreieck die Pseudoelemente :after und :before definiert.

Quelltext CSS
.helpilo2 a + span b:after,
.helpilo2 a + span b:before {
                                        bottom: 100%;
                                        left: 50%;
                                        border: solid transparent;
                                        content: " ";
                                        height: 0;
                                        width: 0;
                                        position: absolute;
                                        pointer-events: none;
}

.helpilo2 a + span b:after {
                                        border-color: rgba(251, 245, 230, 0);
                                        border-bottom-color: #FBF5E6;
                                        border-width: 10px;
                                        margin-left: -10px;
}

.helpilo2 a + span b:before {
                                        border-color: rgba(207, 181, 124, 0);
                                        border-bottom-color: #CFB57C;
                                        border-width: 11px;
                                        margin-left: -11px;
}

Seit dem 13. Juni 2016 ist das Tooltip etwas weiter vom Text entfernt, bei dessen Hovern es erscheinen soll. Damit es nicht sofort verschwindet, wenn der Mauszeiger zwischen das auslösende Element und das Tooltip rutscht, ist ein zusätzliches Pseudoelement :before hilfreich:

Quelltext CSS
.helpilo2 a + span:before,
.helpilo2 span:before,
.helpilo2 + span.io:before {
                 width:100%;
                 height:0.8em; /* Vorsicht, daß die Links im span:after nicht überlappt werden! */
                 content:" ";
                 z-index:1;
                 position:absolute;
                 top:-10px;
                 left:-2px;
                 opacity:0;
                 /*border:1px dotted grey;*/
                /*-webkit-transition:all 0.5s; Safari zeigt denn keinen Text im Kasten an und platziert falsch. */
                -webkit-transition:left 0.5s, right 0.5s;
                -moz-transition:all 0.5s;
                -o-transition:all 0.5s;
                transition:all 0.5s;
}

Auch hier ist :hover nur noch fürs Einblenden da:

Quelltext CSS
.helpilo2 a:hover + span:before,
.helpilo2:hover span:before,
.helpilo2:hover + span.io:before {
                                opacity:1;
                                }

Weil das Dreieck immer oben erscheint, gibt es keine Variation des Randes. Dieser wäre wie folgt zu definieren:

gesetzte border
Position des Dreiecks Erster Positionswert
100%
Zweiter Positionswert
50%
border-color margin-
oben bottom left border-bottom-color margin-left
unten top left border-top-color margin-left
links right top border-right-color margin-top
rechts left top border-left-color margin-top

Kombination aus beidem mit extra border

Bei der dritten Variante der Tooltips ist die Definition des border seit dem 4. September 2016 nicht mehr aufgeteilt:

Quelltext CSS
[data-helpilo]:before {
                margin-right:-0.5em;
                /*top:-1em;
                top:-0.1em;*/
                content:"";
                width:0;
                height:0;
                /* Spitze zeigt nach oben */
                border-color: transparent transparent #FBF5E6 transparent;
                border-width: 15px;
                border-style: solid;
}

Und später beim :hover steht denn nur noch wenig da:

Quelltext CSS
[data-helpilo]:hover:after,
[data-helpilo]:hover:before {
                /* wieder sichtbar. pointer-events hier nötig, damit das Tooltip bei der Mausbewegung vom Link aufs Tooltip nicht verschwindet */
                opacity:1;
                pointer-events: auto;
}

Für neue Browser wird das Ganze denn im @supports-Block noch mal überschrieben:

Quelltext CSS
/* Browser mit transform sollen dieses für das Dreieck nutzen, so daß dort auch ein Border möglich wird */
@supports (transform:rotate(45deg)) or (-webkit-transform:rotate(45deg)) {
                [data-helpilo]:before {
                                /*top:19px;                        */
                                top:14px;
                }
         /* Anpassung in Tabellenzellen */
                td [data-helpilo]:before,
                th [data-helpilo]:before        {
                                 top:14px;
        }
                code[data-helpilo]:before        {
                                 top:8px;
                }

                [data-helpilo]:hover:before {
                                /*transform:translateX(-50%) rotate(45deg);*/
                                -webkit-transform:rotate(45deg);
                                transform:rotate(45deg);
                                background: #FBF5E6;
                                /*background: #FBF5E6;background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
background: -webkit-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);background: linear-gradient(to bottom, #FBF5E6 0%, #FFFFFF 100%);*/
                                border:1px solid #CFB57C;
                                border-bottom:none;
                                border-right:none;;
                                width:15px;
                                height:15px;
                                /*top:.4em;*/
                                z-index:2;
        }

}  /* Ende @supports */

Das Dreieck wird immer an der gleichen Stelle platziert. Zwecks Änderung der Seite müßten folgende Werte angepaßt werden:

entfernter border
Position Positionswert Außenrand Erster border Zweiter border Borderfarben
oben top margin-right border-bottom border-right border-color: transparent transparent #FBF5E6 transparent;
unten bottom margin-right border-top border-left border-color: #FBF5E6 transparent transparent transparent;
links left margin-top border-top border-right border-color: transparent #FBF5E6 transparent transparent;
rechts right margin-top border-bottom border-left border-color: transparent transparent transparent #FBF5E6;