Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Dymek Informacyjny
Forum PHP.pl > Forum > Przedszkole
pemko11
Witam
jak zrobić chmurę informację, że jak najadę myszką na ikonkę graficzną, którą wczesniej wgram to otworzy mi się taki dymek. Dokładnie opisuje to na obrazku poniżej:

Proszę kod.



Tak jak tutaj http://www.ogloszeniaplockie.pl/rejestracja
lobopol
Są dwie możliwości:
1. zrobić tego typu strukturę:
  1. <div class="info">
  2. <div>asdsasad</div>
  3. </div>

Z czego div w info ma być niewidoczny, a stawać się widoczny po najechaniu na info np:
  1. .info:hover div{display:block}

W linku który podałeś na takiej zasadzie to działa zerknij w kod

2. Po najechaniu na i zdarzeniem onmouseover pokazywać ukryty div, a po jego zjechaniu go ukrywać
Niktoś
Jakis dobry jQuery tooltip.
Lobolol ,a jak niby byś pozycjonował takiego diva z hoverem-dla każdego img osobny div?
pemko11
Troszke tego nie rozumiem. czy moglbys mi dac kod do tego gotowego w jquery.? albo cos prostego w zrobieniu. :-)
lobopol
prosta sprawa info position relative, a div w środku position absolute i od topa/lewej strony tak samo są ustawione, javascript jest w tym wypadku zbędny
Niktoś
A ja myśle,że tego tak prosto nie zrobisz,gdyż połażenie diva przynajmniej poziome musi być ustalane dynamicznie ,aby miało to jakiś efekt.Co jak na jedziesz na dolne img ze znakiem ,a div ukaże się przy inpucie który jest na górze?
Ja bym proponował jquery tooltip.
lobopol
Niktoś weź mi głupot nie gadaj, nawet ta strona podana robi to w ten sposób co napisałem.

Masz kilka przykłądów w samym css
http://trentrichardson.com/examples/csstooltips/
http://riddle.jogger.pl/2005/12/12/tooltip-w-css/
http://lixlpixel.org/css_tooltip/

https://www.google.pl/search?sourceid=chrom...680&bih=965
pemko11
Czy moge dostac dokladne inatrukcje jak to zrobic?
Niktoś
Ja gupot ,nie gadam przecież ta strona ma zaimplementowaną całą paczkę jquery wraz z jquery ui i innymi dodatkami.
Popatrz może najpierw w źródło strony.
lobopol
Rzeczywiście, ale używanie do czegoś takiego jquery jest bezsensowne skoro identyczny efekt można uzyskać gołym css na tej stronie wystarczyłoby dodać regułę .tHelp:hover span{display:block}
pemko11
Moglbys mi podac co mam dac do css i co do tego gdzie to chce :-)
lobopol
pemko zerknij sobie w przykłady co podałem
viking
label > input (jako background można dać ikonkę "i" oraz padding) > span (z opisem)

label+span {
display:none;
}

label:hover+span {
display:block;
}

Do tego ustawić position. I google: CSS tooltip. Wiem że to przedszkole ale myślenie to dobra sprawa.
pemko11
ten na lixpixel mi sie wydaje prosty w zrobieniu. Dam za kwadrans znac
Niktoś
lobolol fakt ,ciekawy ten przykład z css'em-nawet patrzyłem czy się nie rozsypie przy zmianie rozdzielczości -ale daje rade,przyznam ,że nie wiedziałem że tak można.
Ja praktycznie nie używam jquery tooltip ani css tooltip.W c# asp. net do każdego tagu standardowo została dodany atrybut tooltip, więc niejako mam to z głowy.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.