IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Michal Kučera
Člen
Avatar
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.
Avatar
Michal Kučera
Člen
Avatar
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.
Avatar
misaj
Člen
Avatar
Odpovídá na Michal Kučera
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
Avatar
Michal Kučera
Člen
Avatar
Odpovídá na misaj
Michal Kučera:25.3.2015 21:32

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
Michal Kučera
Člen
Avatar
Odpovídá na misaj
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.
Avatar
Matej
Člen
Avatar
Odpovídá na Michal Kučera
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
Avatar
Michal Kučera
Člen
Avatar
Odpovídá na Matej
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.
Avatar
Matej
Člen
Avatar
Odpovídá na Michal Kučera
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
Avatar
Michal Kučera
Člen
Avatar
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.
Avatar
Matej
Člen
Avatar
Odpovídá na Michal Kučera
Matej:28.3.2015 19:02

nechapem co myslis :D

 
Nahoru Odpovědět
28.3.2015 19:02
Avatar
Michal Kučera
Člen
Avatar
Odpovídá na Matej
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.
Avatar
Matej
Člen
Avatar
Odpovídá na Michal Kučera
Matej:28.3.2015 22:25

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í
+2,50 Kč
Ř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.