Ŝpruchelpiloj

Ĉie uzeblaj ŝpruchelpiloj

Ekde 2014 la ŝpruchelpiloj estas kreataj resp. montrataj per CSS. Ekzistas tri variantoj de tio, ĉe kio la du unuaj per class kaj <span> estas enplektataj kaj la tria per data-atributo.

La CSS de la du unuaj variantoj

Ekde la 12-a de Oktobro 2016 multaj CSS-difinoj de la du unuaj variantoj estas identaj.

Fontoteksto 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;
                                }

Pro problemoj kun la ombro ĉe dekstre lokita triangulo la 13-an de Oktobro 2016 estis aldonita la jena kodo kaj la 14-an de oktobro 2016 iomete korektita:

Fontoteksto 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 */

Unua varianto

Ĉe la unua varianto la <span> kun la informa teksto estas enmetata en la elementon (ligilo aŭ mallongigo), al kiu ĝi apartenas.

Fontoteksto HTML
<abbr class="helpilo liva">P<span><b></b>La rondigitaj anguloj kaj la ombro tie ne funkcias, same kiel la iompostiomaj transiroj.</span></abbr>
<abbr class="helpilo dekstra">P<span><b></b>La rondigitaj anguloj kaj la ombro tie ne funkcias, same kiel la iompostiomaj transiroj.</span></abbr>

La rezulto estas videbla en la dua tabelo en "Testitaj foliumiloj".

Varianto <a> <abbr> <code> Ekzemplo 1 Ekzemplo 2
Ligilo en <span> N J J PLa rondigitaj anguloj kaj la ombro tie ne funkcias, same kiel la iompostiomaj transiroj. PLa rondigitaj anguloj kaj la ombro tie ne funkcias, same kiel la iompostiomaj transiroj.

La elemento <b></b> aperigas per helpo de CSS la tipan triangulan aldonaĵeton de parolindika bobelo.

Dua varianto

Ĉe la dua varianto la <span> estas enmetata post la elemento (ligilo), al kiu ĝi apartenas. Tio estas nur sencoplena, se la informteksto mem enhavas ligilon. Krome la class estas aldonata al la ĉirkaŭanta elemento (en la ekzemplo p).

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

La rezulto estas videbla en la ĉapitro "Kurse" (esperante Kursoj) sur la Informpaĝo de la societo.

Varianto <p> Ekzemplo
Ligilo en <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.:

Anstataŭ <p> estas permesata ĉiu alia elemento, kiu rajtas enhavi ligilon (<a>). Krome eĉ en la elemento <span> povas stari ligilo, ĉar ja <span> staras ekster la ligilo (<a>). Ekde la 15-a de Decembro 2014 funkcias eĉ la malgranda triangulo, kiel ĝi estas kutima ĉe parolindikaj bobeloj. Ekde la 11-a de oktobro 2016 la foliumila kongrueco estas pli bona.

Tria varianto

Ĉe la tria varianto speciala class ĉe la elemento ne estas necesa, ĉe kiu aperu la informteksto. Tie staras tiam anstataŭ tio data-helpilo-atributo.

Fontoteksto HTML
<abbr data-helpilo="La animacio mankas.">P</abbr>

La rezulto aperas en la dua tabelo en "Testitaj foliumiloj".

Anstataŭ <abbr> eblas ĉiu elemento, kiu povas havi fermantan etikedon (ekz. </abbr>).

  Ekzemplo
Varianto kun data-atributo P

La CSS aspektas jene:

Fontoteksto 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 */

Ekde la 29-a de julio 2016 ĝi funkcias eĉ en Interreta Esplorilo 7, ĉar Javaskripto fakte "tradukas" ĝin en la unuan varianton.

Aldonaj klasoj

Ĉe la unua kaj tria variantoj povas esti aldonata class kun la valoro liva, tiel ke la ŝpruchelpilo aperas je alia pozicio.

En la RSS-fluo uzata ŝpruchelpilo

Ekde la 10-a de junio 2016 la ŝpruchelpilo en la piedlinio havas pli belan triangulan parton, ĉar ĝi finfine havas propran borderon. Sed ekde la 9-a de oktobro 2016 por tio ne plu estas uzata transform.

Jen la uzata CSS:

Fontoteksto 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 */

Ŝpruchelpilo en bildogalerioj resp. sur la startopaĝo

Eĉ ĉe bildoj en galerioj kaj ĉe unu bildo sur la startopaĝoj la priskribo estas aranĝata kiel ŝpruchelpilo.

La ĉirkaŭanta <figure>-etikedo havas jenajn CSS-formatojn:

Fontoteksto 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;
           }

Por ke <figcaption>-etikedo estu formatigebla kiel sendepende metebla elemento, necesas position:relative ĉe la ĉirkaŭanta <figure>-etikedo.

Jen la komunaj bazaj formatoj por la <figcaption>-etikedo:

Fontoteksto 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;
           }

La supre videbla position:absolute; ebligas sendependan lokigon de la elemento rilate al la ĉirkaŭanta etikedo. La trajto opacity: kun la valoro 0 entute travidebligas ĉion, tiel ke ĝi ne estas videbla.

Por malkaŝi la ŝpruchelpilon per hover kaj focus estas uzata la jeno:

Fontoteksto 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);
                   }

Por la trianguleto necesas la jeno:

Fontoteksto 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);
                        }

Trianguloj ĉe la rando

De la trianguloj ĉe la rando de ŝpruchelpiloj eblas du variantoj, nome unu kun border kaj unu kun transform:rotate.

La du unuaj variantoj de la ŝpruchelpiloj uzas nur border, dum ke la tria uzas ankaŭ transform.

Nur border

Unua varianto

Ĉe la unua varianto de la ŝpruchelpiloj la kodo por la triangulo estas triparta. La pli granda parto enhavas ĉiujn formatojn, kiuj ĉiam validu, dum ke la du sekvaj partoj difinas la fonon resp. randon de la trianguleto.

Fontoteksto 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;
                                }

Ĉe alia lokigo de la ŝpruchelpilo per la atributo class="liva" resp. class="dekstra" kelkaj formatoj estas alĝustigataj:

Fontoteksto 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;
                                }
Fontoteksto 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;
                                }

Ĉe ŝanĝita lokigo de la triangulo sekvaj valoroj estu alĝustigataj:

difinitaj border
Pozicio de la triangulo Unua pozicia valoro
100%
Dua pozicia valoro
50%
border-color margin-
supre bottom left border-bottom-color margin-left
malsupre top left border-top-color margin-left
maldekstre right top border-right-color margin-top
dekstre left top border-left-color margin-top

Dua varianto

Ĉe la dua varianto de la ŝpruchelpilo la tuto aspektas same, ĉar ankaŭ tie por la triangulo estas difinataj la pseŭdoelementoj :after kaj :before.

Fontoteksto 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;
}

Ekde la 13-a de Junio 2016 la ŝpruchelpilo situas iom pli malproksime de la teksto, ĉ kies Hovern ĝi aperu. Por ke ĝi ne malaperu tuj, se la musmontrilo moviĝas inter la aperiganta elemento kaj la ŝpruchelpilo, helpas aldona pseŭdoelemento :before:

Fontoteksto 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;
}

Ankaŭ ĉie tie :hover nur estas uzata por la reaperigo:

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

Ĉar da la triangulo aperas ĉiam supre, ne estas variado de la marĝeno. Tio estu jene difinata:

difinitaj border
Pozicio de la triangulo Unua pozicia valoro
100%
Dua pozicia valoro
50%
border-color margin-
supre bottom left border-bottom-color margin-left
malsupre top left border-top-color margin-left
maldekstre right top border-right-color margin-top
dekstre left top border-left-color margin-top

Kombino el ambaŭ kun kroma border

Ĉe la tria varianto de la ŝpruchelpiloj la difino de la border ne plu estas disigita:

Fontoteksto 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;
}

Kaj poste ĉe :hover estas nur malmulte da kodo:

Fontoteksto 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;
}

Por novaj foliumiloj la tuto estas superskribata en @supports-bloko ankoraŭfoje:

Fontoteksto 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 */

La triangulo estas metata ĉiam al la sama pozicio. Por ŝanĝo de la flanko la sekvaj valoroj devus esti alĝustigataj:

forigitaj border
Pozicio Pozicia valoro Ekstera margeno Unua border Dua border Borderaj koloroj
supre top margin-right border-bottom border-right border-color: transparent transparent #FBF5E6 transparent;
malsupre bottom margin-right border-top border-left border-color: #FBF5E6 transparent transparent transparent;
maldekstre left margin-top border-top border-right border-color: transparent #FBF5E6 transparent transparent;
dekstre right margin-top border-bottom border-left border-color: transparent transparent transparent #FBF5E6;