Při tvorbě webu stuidoseven.cz jsme narazili na dilema které v praxi vypadá úplně triviálně, ale realita byla úplně jiná. Jedná se o tooltipy neboli linky, které poskytují nápovědu na dané klíčové slovo. Tooltipy jsme potřebovali do webu abychom uživatelům, kteří se v daném oboru moc neorientují nebo neznají danou terminologii poskytli určitý náhled na věc a tím jim pomohli v rozhodování. V praxi se na takový toolTip můžete podívat např. tímtoZde můžete nalézt rady, komentáři či co chcete spojit v kontextu se základním slovem. způsobem.
Realita vypadá poměrně jednoduše, ale praxe je více než problematická. Pro CSS/HTML programátora toto může být zdánlivě jednoduchá úloha, kterou lze nalézt i v seznamu tutoriálu na w3cschools.org. My jsme ale přišli na to že tato úloha opravdu jednoduchá není. Pokud máte alespoň malé povědomí o CSS představíte si jednoduché řešení:
V html kódu kdekoliv na stránce
<span class="toolTip"> Vaše klíčové slovo <span class="helpText">Vaše komentáře k danému slovu. Lorem ipsum dolor.</span> </span>
V css globálně přístupném souboru
.toolTip .helpText{
display: none;
}
.toolTip{
font-size: 16px;
display: inline-block;
position: relative;
}
.toolTip:hover .helpText{
display: block;
}
.helpText{
position: absolute;
bottom: -55px;
background-color:red;
padding: 8px;
border-radius: 10px;
width: 180px;
color: white;
left: calc(50% - 90px);
}
Jak vidíte řešení je velice jednoduché a pokud se trošku dopracuje může vypadat opravdu zajímavě a být funkční. Při realizaci studioseven.cz jsme se rozhodli toto řešení použít jakožto nejjednodušší a efektní řešení, které pro svůj účel zcela postačilo. Avšak opak byl pravdou. Takto jednoduché řešení může fungovat jen v opravdu okrajových případech.
Představte si situaci, kdy použijete toto jednoduché řešení toolTipu a váš rodičovský kontejner se blíží okraji okna. Nevěříte že takovýto případ nastane? Ale ano nastane. Stačí vyzkoušet responzivní verzi webu a vaše toolTipy se takzvaně začnou sypat. Nebudou k přečtení, začnou zalézat za okraj stránky. Jak si pomůžete? Neexistuje jediné možné řešení pomocí CSS nebo HTML které by toto dokázalo řešit a to jsme se tímto problémem zabývali opravdu dlouho. Stačí si web s touto funkcionalitou pustit na mobilním telefonu či tabletu a okamžitě uvidíte to katastrofu.
My se ale při vývoji studioseven.cz s tímto nesmířili. Chtěli jsme naším čtenářům nebo potencionálním zákazníkům poskytnou maximum informací, které jsou okamžitě přístupné a okamžitě podávají jasné vysvětlení pro danou problematiku. Po dlouhém řešení jsme nakonec přišli s výsledkem který je doposud neprůstřelný a opravdu funguje.
Seven toolTip
Instalace je zcela jednoduchá, napojte javascript přes html tag script, napojte CSS přeš html tag link a Váše tooltipy jsou připraveny. Pak již jen stačí značkovat uprostřed textu. Pozor, kód má přímé závislosti na JQuery 1.12.4.
CSS
.toolTip .helpText {
-webkit-transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out;
transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out;
visibility: hidden;
display: block;
position: absolute;
width: 200px;
height: auto;
background-color: #ff0000;
padding: 8px;
color: white;
border-radius: 5px;
opacity: 0;
text-align: justify;
z-index: 999;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2);
}
.toolTip .helpText::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #ff0000 transparent;
}
.toolTip {
display: inline-block;
border-bottom: 1px dotted grey;
line-height: 1.2em;
cursor: help;
}
.helpText.hover {
visibility: visible;
opacity: 1;
}
Javascript
/******************* TOOLTips **************/
jQuery(".toolTip").mousemove(function (e){
var mousex = e.pageX-10; //Get X coordinates
var mousey = e.pageY +20; //Get Y coordinates
if(mousex + jQuery(this).find(".helpText").innerWidth()/2 > jQuery(this).offsetParent().innerWidth()+mousex){
jQuery(this).find(".helpText").css({top: mousey - jQuery(this).offsetParent().offset().top, right: 0, left: "initial"});
}else if((mousex - jQuery(this).find(".helpText").innerWidth()/2) < jQuery(this).offsetParent().offset().left){
jQuery(this).find(".helpText").css({top: mousey - jQuery(this).offsetParent().offset().top, left: 0, right: "initial"});
}else{
jQuery(this).find(".helpText").css({top: mousey - jQuery(this).offsetParent().offset().top, left: mousex-jQuery(this).find(".helpText").innerWidth()/2-jQuery(this).offsetParent().offset().left});}
jQuery(this).find(".helpText").addClass("hover");
});
jQuery(".toolTip").mouseout(function(){
jQuery(this).find(".helpText").removeClass("hover");
});
jQuery(".toolTip").on("tap touchstart click",function (e){
var mousex = e.pageX-10; //Get X coordinates
var mousey = e.pageY +20; //Get Y coordinates
if(mousex + jQuery(this).find(".helpText").innerWidth()/2 > jQuery(this).offsetParent().innerWidth()){
jQuery(this).find(".helpText").css({top: mousey - jQuery(this).offsetParent().offset().top, right: 0, left: "initial"});
}else if((mousex - jQuery(this).find(".helpText").innerWidth()/2) < jQuery(this).offsetParent().offset().left){
jQuery(this).find(".helpText").css({top: mousey - jQuery(this).offsetParent().offset().top, left: 0, right: "initial"});
}else{
jQuery(this).find(".helpText").css({top: mousey - jQuery(this).offsetParent().offset().top, left: mousex-jQuery(this).find(".helpText").innerWidth()/2-jQuery(this).offsetParent().offset().left});
}
jQuery(this).find(".helpText:after").css({top: mousey - jQuery(this).offsetParent().offset().top, right: 0, left: "initial"});
jQuery(this).find(".helpText").addClass("hover");
setTimeout(function(){
jQuery(".helpText").each(function(element){
jQuery(this).removeClass("hover");
});
},10000);
});
jQuery(".toolTip").on("touchend",function (e){
jQuery(this).find(".helpText").removeClass("hover");
});
Použití v HTML kdekoliv na stránce
<span class="toolTip"> Vaše klíčové slovo <span class="helpText">Vaše komentáře k danému slovu. Lorem ipsum dolor.</span> </span>
Nyní se můžete spolehnout, že toolTipy nikdy nebudou zalézat za okraj okna, naopak budou dokonce respektovat okraj rodiče. Musíme však prohlásit že jediným nepřítelem proti kterému zatím nemáme zbraň je nastavení CSS overflow na rodiči a nebo nastaveni clip-path na rodiči. Tyto CSS vlastnosti zamezí vystoupání helpTextu mimo rozsah rodiče na výšku a ustříhnou ho dříve než je text dokončen.
Doufám, že Vám byl náš článek k užitku a příště se podíváme na základní uživatelské rozhraní systému na němž vyvíjíme webové stránky – WordPress.
Napsat komentář