Ü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 aller Varianten
Seit dem 12. Oktober 2016 sind viele CSS-Definitionen der ersten beiden Varianten identisch. Am 12. März 2018 wurde das Skript etwas ergänzt, um auch dort die Focus-Funktionalität zu haben. Seit dem 18. März 2018 sind alle drei Tooltipvarianten teilweise im Quelltext zusammengefaßt. Am 15. April 2018 am und 17. Mai 2018 wurde noch etwas ergänzt.
/* kleine Hilfsfenster bei Verweisen in einem // PHP-Version */
/* Tooltips mit - helpilo mit span im entsprechenden Tag und helpilo2 mit dem Tag danach */
.helpilo,
.helpilo2,
[data-helpilo] {
position:relative;
}
.helpilo,
[data-helpilo] {
outline:none;text-decoration:none;border-bottom:dotted 2px blue;}
.helpilo2,
[data-helpilo] {
width:36em;
}
/* Markierung an den Link kleben */
.helpilo2 > a:after {
content:"\25bc";
padding-left:1px;
color:inherit;
}
#enhavo .helpilo2 > a:after {
font-size:.7em;
}
.helpilo2 > a:hover:after,
.helpilo2 > a:focus:after {
content:"\25b2";
}
/* Anpassungen bei bestimmten Tag */
td .helpilo {
display:block;
/*width:100%;*/
}
.helpilo > span,
.helpilo2 a + span,
.helpilo2 + span.io,
[data-helpilo]:after,
[data-helpilo]:before {
position:absolute;
top:1.5em;
/* 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;
padding:0.5em;
/*-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,
.helpilo2 a + span,
.helpilo2 + span.io {
min-width:6em;
max-width:35em;
}
.helpilo > span,
.helpilo2 a + span,
.helpilo2 + span.io,
[data-helpilo]:after {
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;
right:0;
}
.helpilo > span,
[data-helpilo]:after {
width:200px;
}
[data-helpilo]:after {
content:attr(data-helpilo);
top:1em;
}
/* 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,
[data-helpilo]:hover:after,
[data-helpilo]:hover:before {
/* wieder sichtbar und oberhalb der Seitenebene */
opacity:1;
z-index:2;
}
.helpilo2 a:focus[href] + span,
.helpilo2:focus span,
.helpilo2:focus + span.io,
.helpilo2 a.focus + span,
.helpilo2.focus span,
.helpilo2.focus + span.io,
[data-helpilo]:focus:after,
[data-helpilo]:focus:before {
/* wieder sichtbar und oberhalb der Seitenebene */
opacity:1;
z-index:2;
}
/* Anpassungen beim Hovern */
.helpilo:hover > span,
[data-helpilo]:after {
text-decoration:none;
overflow: visible;
top:30px;
right:-180px;
display: inline;
}
[data-helpilo]:after {
top:25px;
}
/* Ergänzung für a */
a.helpilo:hover {
border-bottom:2px solid #006666;
}
.helpilo span:after,
.helpilo span:before,
.helpilo2 a + span:after,
.helpilo2 a + span:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.helpilo span:after,
.helpilo2 a + span:after {
border-color: rgba(251, 245, 230, 0);
border-bottom-color: #FBF5E6;
border-width: 10px;
margin-left: -10px;
}
.helpilo span:before,
.helpilo2 a + span:before {
border-color: rgba(207, 181, 124, 0);
border-bottom-color: #CFB57C;
border-width: 11px;
margin-left: -11px;
}
/* mit Hilfe vom Safari 5.1 teilweise korrigiert */
[data-helpilo]:before {
content: "";
width: 0;
height: 0;
/* Spitze zeigt nach oben */
border-color: transparent transparent #FBF5E6 transparent;
border-width: 10px;
border-style: solid;
left:50%;
top:-0.3em;/*-0.5em;*/
margin-left:-10px;
}
/* sonst erscheint das Dreieck unterhalb vom Tooltip */
[data-helpilo]:hover:before,
[data-helpilo]:focus:before {
z-index:3;
}
code[data-helpilo]:before,
code[data-helpilo]:after {
font-size:0.81em;
font-family:Verdana,Helvetica,Geneva,Arial,"Trebuchet MS",sans-serif;;
}
code[data-helpilo]:after {
top:16px;
}
/* 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:16px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
background: #FBF5E6;
border:1px solid #CFB57C;
border-bottom:none;
border-right:none;
margin-left:-0.5em;
}
/* Anpassung in Tabellenzellen */
td [data-helpilo]:before,
th [data-helpilo]:before {
top:18px;
}
code[data-helpilo]:before {
top:8px;
}
} /* Ende @supports */
/* 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:after,
.helpilo.liva span:before {
/* Defaultwerte zurücksetzen */
bottom:auto;
left:auto;
/* Für links platziertes Dreieck */
right:100%;
top: 50%;
}
.helpilo.liva span:after {
/* Defaultwerte zurücksetzen */
border-bottom-color:transparent;
margin-left:auto;
/* Für links platziertes Dreieck */
border-color:rgba(253, 250, 243, 0);
border-right-color: #FDFAF3;
margin-top: -10px;
}
.helpilo.liva span: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 {
left:auto;
top:-50%;
right:100px;
}
.helpilo.dekstra span:after,
.helpilo.dekstra span:before {
/* Defaultwerte zurücksetzen */
bottom:auto;
/* Für rechts platziertes Dreieck */
left: 100%;
top: 50%;
}
.helpilo.dekstra span:after {
/* Defaultwerte zurücksetzen */
border-bottom-color:transparent;
margin-left:auto;
/* Für rechts platziertes Dreieck */
border-color:rgba(253, 250, 243, 0);
border-left-color: #FDFAF3;
margin-top: -10px;
}
.helpilo.dekstra span:before {
/* Defaultwerte zurücksetzen */
border-bottom-color:transparent;
margin-left:auto;
/* Für rechts platziertes Dreieck */
border-left-color: #CFB57C;
margin-top: -11px;
-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));
}
Wegen Problemen mit dem Schatten beim rechts platziertem Dreieck wurde am 13. Oktober 2016 folgender Code ergänzt und am 14. Oktober 2016 sowie im April 2018 etwas korrigiert:
/* inspiriert von https://codepen.io/ryanmcnz/pen/JDLhu */
@supports (transform:rotate(-45deg)) or (-webkit-transform:rotate(-45deg)) {
.helpilo.dekstra span: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.
<abbr class="helpilo liva">T<span>Die abgerundeten Ecken und die Schatten funktionieren dort nicht, ebenso wie die allmählichen Übergänge.</span></abbr>
<abbr class="helpilo dekstra">T<span>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. |
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.
<p class="helpilo2">oder im <a href="../ligoj/links2.html">Weltnetz</a><span>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.
<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 |
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 seit April 2018 genutzte CSS:
/* Tooltips beim RSS-Feed */
footer[role="contentinfo"] ul li.icon-rss-squared a {
position:relative;
display:inline;
}
footer[role="contentinfo"] ul li.icon-rss-squared 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:8px;
margin:25px 0 0 10px;
color:black;
background:#ccf;
background: -moz-linear-gradient(left, #ccf 0%, #ddf 100%);
background: -webkit-linear-gradient(left, #ccccff 0%,#ddddff 100%);
background: linear-gradient(to right, #ccf 0%, #ddf 100%);
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.icon-rss-squared abbr {
border-bottom:none;
padding-right:0;
padding-left:0;
}
footer[role="contentinfo"] ul li.icon-rss-squared abbr:after,
footer[role="contentinfo"] ul li.icon-rss-squared abbr:before {
right: -15.2%;
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.icon-rss-squared abbr:after,
footer[role="contentinfo"][lang="eo"] ul li.icon-rss-squared abbr:before {
right:-16.5%;
}
footer[role="contentinfo"]:not([lang]) ul li.icon-rss-squared abbr:after,
footer[role="contentinfo"]:not([lang]) ul li.icon-rss-squared abbr:before {
right:-9.5%;
}
footer[role="contentinfo"] ul li.icon-rss-squared abbr:after {
border-color: rgba(204, 204, 255, 0);
border-right-color: #CCF;
border-width: 10px;
margin-top: -10px;
}
footer[role="contentinfo"] ul li.icon-rss-squared abbr:before {
border-color: rgba(0, 0, 255, 0);
border-right-color: #0000FF;
border-width: 11px;
margin-top: -11px;
}
/* zweisprachig mit Zeilenumbruch */
footer[role="contentinfo"] ul li.icon-rss-squared a:after {
content:"Der RSS-Feed kann hier abonniert werden. \A La RSS-fluo povas esti abonata \0109i tie.";
white-space:pre;
}
/* Unterschiedliche Texte je nach der Sprache bzw. den Sprachen der Seite */
footer[role="contentinfo"][lang="de"] ul li.icon-rss-squared a:after {
content:"Der RSS-Feed kann hier abonniert werden.";
}
footer[role="contentinfo"][lang="eo"] ul li.icon-rss-squared a:after {
content:"La RSS-fluo povas esti abonata \0109i tie.";
}
footer[role="contentinfo"] ul li.icon-rss-squared a:hover:after,
footer[role="contentinfo"] ul li.icon-rss-squared a:focus:after,
footer[role="contentinfo"] ul li.icon-rss-squared a:hover abbr:after,
footer[role="contentinfo"] ul li.icon-rss-squared a:hover abbr:before,
footer[role="contentinfo"] ul li.icon-rss-squared a:focus abbr:after,
footer[role="contentinfo"] ul li.icon-rss-squared a:focus abbr:before {
visibility:visible;
opacity:1;
}
footer[role="contentinfo"] ul li.icon-rss-squared a:hover:after,
footer[role="contentinfo"] ul li.icon-rss-squared 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:
.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:
.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:
.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:
/* 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ößere Teil enthält alle Formate, die immer gelten sollen, während die beiden folgenden Teile den Hintergrund bzw. Rand des Dreiecks definieren.
.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:
/* 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;
}
/* Infofenster mit rechts platziertem Dreieck */
.helpilo.dekstra > span {
left:auto;
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:
| Position des Dreiecks | Erster Positionswert100% |
Zweiter Positionswert50% |
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.
.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:
.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:
.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:
| Position des Dreiecks | Erster Positionswert100% |
Zweiter Positionswert50% |
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:
[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:
[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:
/* 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:
| 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; |