[HTML] Dymek Informacyjny Opcje

[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

Ten post edytował pemko11 10.03.2012, 16:22:30

[lobopol]

Są dwie możliwości:
1. zrobić tego typu strukturę:

[HTML] pobierz, plaintext 
<div class="info">
<div>asdsasad</div>
</div>
[HTML] pobierz, plaintext 

Z czego div w info ma być niewidoczny, a stawać się widoczny po najechaniu na info np:

[CSS] pobierz, plaintext 
.info:hover div{display:block}
[CSS] pobierz, plaintext 

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ć

Ten post edytował lobopol 10.03.2012, 16:27:17

[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

Ten post edytował lobopol 10.03.2012, 16:33:15

[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

Ten post edytował lobopol 10.03.2012, 16:39:01

[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.

Ten post edytował Niktoś 10.03.2012, 16:40:51

[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}

Ten post edytował lobopol 10.03.2012, 16:43:30

[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.

Ten post edytował Niktoś 10.03.2012, 16:53:11