Diskuze: Tooltip delay?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Michal Kučera

Člen

Michal Kučera:25.3.2015 18:25

Ahoj, mám udělaný css tooltip a ...
moje otázka je:
jak zařídit, aby po najetí na adresa__text se ihned zobrazil adresa__tooltip, a když ten kurzor dám pryč, aby tam byla nějaká ("delay") "odezva", která by zařídila že tooltip nezmizne ihned po odjetí kurzoru, ale až za třeba 0,5s.
K čemu?
Kdy najedu na adresa__text a chci z ní přejet na adresa__tooltip, tooltip mezitím zmizne, protože není hned u adresa__text (mám jinak nastavené, že se tooltip zobrazuje jak při najetí na __text, tak i na __tooltip)
Na internetu jsem našel takovou vychytávku, ale je to anglicky..
http://goodui.org/#62 , http://bjk5.com/…ega-dropdown
Já sice anglicky umím dobře ale dobře je za 3, a taky je ten článek je celkem dlouhý takže prosím o radu a taky jestli je lepší delay, nebo to co je v tom odkazu, děkuji za feedback

Kód:

.adresa__obal{
    position:relative;
}
.adresa__tooltip{
    border-radius:3px;
    background:#000;
    color:#fff;
    padding:6px;
    visibility:hidden;
    position:absolute;
    font-family:Georgia;
    width:auto;
}
.adresa__tooltip::after{
    width:0; height:0; content:'';
    border-left: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position:absolute;
    left:100%;
    top:10px;
}
.adresa__text:hover + .adresa__tooltip,
.adresa__tooltip:hover{
    visibility:visible;
    opacity: 0.98;
    z-index:999;
    bottom:-138px;
    left:-197%;
}

<div class="adresa__obal">
                <span class="adresa__text">Adresa </span>
                <div class="adresa__tooltip">
                    <p style="font-family:b; margin:0;text-align:center;">
                        Technologicko-inovační park Ostrava s.r.o.</p><br>
                    <p style="padding:0 20px 0 20px; margin:0;">Vratimovská 681      <br>
                    709 00 Ostrava-Kunčice                     <br>

                    <a href="contact.php">Zobrazit na mapě</a></p>
                </div>
            </div>

Odpovědět

25.3.2015 18:25

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Michal Kučera

Člen

Michal Kučera:25.3.2015 18:38

Rychlá ukázka
http://jsfiddle.net/1kqrgw0h/

Nahoru Odpovědět

25.3.2015 18:38

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

misaj

Člen

misaj:25.3.2015 21:29

Pokud to chceš jen pomocí CSS, tak nevím.

Já bych na to šel přes javascript (jquery) a událost hover.
Asi takle:

$( ".adresa__text" ).hover(
  function() {
    $( ".adresa__tooltip" ).fadeIn()
  }, function() {
     setTimeout(function(){
       $( ".adresa__tooltip" ).fadeOut();
     }, 3000);
  }
);

Psal jsem to z hlavy, ale doufám, že to poslouží alespoň jako inspirace.

Nahoru Odpovědět

25.3.2015 21:29

Michal Kučera

Člen

Michal Kučera:25.3.2015 21:32

Myslim to pomocí js no.. proto to taky píšu do js fóra , zitra zkusim. diky

Nahoru Odpovědět

25.3.2015 21:32

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Michal Kučera

Člen

Michal Kučera:27.3.2015 17:07

Nefunguje

Nahoru Odpovědět

27.3.2015 17:07

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Matej

Člen

Matej:27.3.2015 17:31

Ak chces pomocou CSS tak to napriklad mozes spravit pomocou keyframes viz.
http://jsfiddle.net/jw9n4y32/ (optimalizovane pre chrome)

Nahoru Odpovědět

27.3.2015 17:31

Michal Kučera

Člen

Michal Kučera:27.3.2015 17:40

Tohle je přesně co bych chtěl, kdyby to fungovalo naopak, ty máš mezeru mezi najetím a zobrazením, já bych ale chtěl mezeru mezi "odjetím" a zmizením

Nahoru Odpovědět

27.3.2015 17:40

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Matej

Člen

Matej:27.3.2015 18:19

http://jsfiddle.net/L3xcqfz7/1 trocha sa staci pohrat s classami (aj ked sa najde urcite jednoduschi sposob ako ten moj)

Editováno 27.3.2015 18:21

Nahoru Odpovědět

27.3.2015 18:19

Michal Kučera

Člen

Michal Kučera:28.3.2015 9:49

http://prntscr.com/6mblia , to je přesně ono, akorát že je tam nějaká chyba ?

Nahoru Odpovědět

28.3.2015 9:49

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Matej

Člen

Matej:28.3.2015 19:02

nechapem co myslis

Nahoru Odpovědět

28.3.2015 19:02

Michal Kučera

Člen

Michal Kučera:28.3.2015 20:19

Prostě je tam taková chyba - normálně to funguje akorát se tam potom zobrazí toto (screenshot - http://prntscr.com/6mblia ), i když to tam nemá být, a zůstane to tam napořád.

Editováno 28.3.2015 20:20

Nahoru Odpovědět

28.3.2015 20:19

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

Matej

Člen

Matej:28.3.2015 22:25

Mas pravdu je tam chyba , problem je v tom ze sa nestihaju vymazavat/pripisovat classy a nastane tam zmatok.
http://jsfiddle.net/xkb962yf/ toto by malo byt v poriadku.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

28.3.2015 22:25

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.

Nejčastěji vyhledáváné

Diskuze: Tooltip delay?