Ĉ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 ĉiuj variantoj
Ekde la 12-a de Oktobro 2016 multaj CSS-difinoj de la du unuaj variantoj estas identaj. La 12-an de marto 2018 la skripto ricevis aldoneton por ebligi fokusan trajton eĉ ĉe ŝpruc-helpiloj. Ekde la 18-a de marto 2018 ĉiuj tri variantoj de ŝpruchelpiloj estas kunigitaj parte en la fontoteksto. La 15-an de Aprilo 2018 kaj la 17-an de Majo 2018 ankoraŭ io aldoniĝis.
/* 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));
}
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 kaj en aprilo 2018 iomete korektita:
/* 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 */
Unua varianto
Ĉe la unua varianto la <span> kun la informa teksto estas enmetata en la elementon (ligilo aŭ mallongigo), al kiu ĝi apartenas.
<abbr class="helpilo liva">P<span>La rondigitaj anguloj kaj la ombro tie ne funkcias, same kiel la iompostiomaj transiroj.</span></abbr>
<abbr class="helpilo dekstra">P<span>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. |
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).
<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>
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.
<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 |
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 CSS uzata ekde aprilo 2018:
/* 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 */
Ŝ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:
.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:
.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:
.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:
/* 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.
.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:
/* 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;
}
Ĉe ŝanĝita lokigo de la triangulo sekvaj valoroj estu alĝustigataj:
| Pozicio de la triangulo | Unua pozicia valoro100% |
Dua pozicia valoro50% |
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.
.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:
.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:
.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:
| Pozicio de la triangulo | Unua pozicia valoro100% |
Dua pozicia valoro50% |
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:
[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:
[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:
/* 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:
| 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; |