Avatar
Majkl
Člen
Avatar
Majkl:

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.
Avatar
Majkl
Člen
Avatar
Nahoru Odpovědět 25.3.2015 18:38
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
misaj
Člen
Avatar
Odpovídá na Majkl
misaj:

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
Avatar
Majkl
Člen
Avatar
Odpovídá na misaj
Majkl:

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

Nahoru Odpovědět 25.3.2015 21:32
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Majkl
Člen
Avatar
Nahoru Odpovědět 27.3.2015 17:07
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Matej
Člen
Avatar
Odpovídá na Majkl
Matej:

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
Avatar
Majkl
Člen
Avatar
Odpovídá na Matej
Majkl:

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.
Avatar
Matej
Člen
Avatar
Odpovídá na Majkl
Matej:

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
Avatar
Majkl
Člen
Avatar
Majkl:

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.
Avatar
Matej
Člen
Avatar
Odpovídá na Majkl
Matej:

nechapem co myslis :D

 
Nahoru Odpovědět 28.3.2015 19:02
Avatar
Majkl
Člen
Avatar
Odpovídá na Matej
Majkl:

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.
Avatar
Matej
Člen
Avatar
Odpovídá na Majkl
Matej:

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

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 28.3.2015 22:25
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.