hlmod.hu :: tooltip

hlmod.hu https://hlmod.hu/

tooltip https://hlmod.hu/viewtopic.php?f=114&t=29355	Oldal: 1 / 1

Szerző:	*GrafitY* [ 2018.09.02. 22:54 ]
Hozzászólás témája:	tooltip
Sziasztok! Adott a következő: Hogyan tudom megoldani, hogy ne kövesse a kurzort, csak a kép alatt jelenjen meg a tooltip, attól függetlenül, hogy mennyi szöveg van benne? js, és css: ► Spoiler mutatása Kód: [Egész kijelölése] [Mutatás/Eltüntetés] <script> $(document).ready(function () { $('img').hover(function () { // Hover over code var title = $(this).attr('alt'); $(this).data('tipText', title); $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow'); }, function () { // Hover out code $(this).attr('alt', $(this).data('tipText')); $('.tooltip').remove(); }).mousemove(function (e) { var mousex = e.pageX + 20; //Get X coordinates var mousey = e.pageY + 10; //Get Y coordinates $('.tooltip').css({ top: mousey, left: mousex }) }); }); </script> <style> .tooltip { display: none; position: absolute; border: 1px solid #333; background-color: #161616; border-radius: 5px; padding: 10px; color: #fff; font-size: 12px Arial; } </style> GeSHi © Codebox Plus Egy egyszerű tag-hez van adva: Kód: [Egész kijelölése] [Mutatás/Eltüntetés] `<img src="image.jpg" alt="ide jön a tooltip szöveg" />` GeSHi © Codebox Plus

Szerző:	Krisznitro [ 2018.09.03. 06:30 ]
Hozzászólás témája:	Re: tooltip
GrafitY írta: Sziasztok! Adott a következő: Hogyan tudom megoldani, hogy ne kövesse a kurzort, csak a kép alatt jelenjen meg a tooltip, attól függetlenül, hogy mennyi szöveg van benne? js, és css: ► Spoiler mutatása Kód: [Egész kijelölése] [Mutatás/Eltüntetés] <script> $(document).ready(function () { $('img').hover(function () { // Hover over code var title = $(this).attr('alt'); $(this).data('tipText', title); $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow'); }, function () { // Hover out code $(this).attr('alt', $(this).data('tipText')); $('.tooltip').remove(); }).mousemove(function (e) { var mousex = e.pageX + 20; //Get X coordinates var mousey = e.pageY + 10; //Get Y coordinates $('.tooltip').css({ top: mousey, left: mousex }) }); }); </script> <style> .tooltip { display: none; position: absolute; border: 1px solid #333; background-color: #161616; border-radius: 5px; padding: 10px; color: #fff; font-size: 12px Arial; } </style> GeSHi © Codebox Plus Egy egyszerű tag-hez van adva: Kód: [Egész kijelölése] [Mutatás/Eltüntetés] `<img src="image.jpg" alt="ide jön a tooltip szöveg" />` GeSHi © Codebox Plus Hi. Ehhez nem kell jQuery: Tooltips

Szerző:	*GrafitY* [ 2018.09.03. 13:56 ]
Hozzászólás témája:	Re: tooltip
Esetemben img tag-el nem megy.

Szerző:	Krisznitro [ 2018.09.03. 15:02 ]
Hozzászólás témája:	Re: tooltip
GrafitY írta: Esetemben img tag-el nem megy. Esetleg így? http://jsfiddle.net/kj96nw5x/7/ A CSS-t próbáltam úgy állítani, hogy látszódjanak a dolgok, de majd testre szabod.

Szerző:	*GrafitY* [ 2018.09.03. 15:53 ]
Hozzászólás témája:	Re: tooltip
Ez most az én verzióm, vagy amit te küldtél első kommentedbe?

Szerző:	Krisznitro [ 2018.09.03. 17:30 ]
Hozzászólás témája:	Re: tooltip
GrafitY írta: Ez most az én verzióm, vagy amit te küldtél első kommentedbe? A második a tiéd, az elsőt csak linkeltem hátha sikerül úgy is. UI.: A másodikból csak néhány CSS elemet írtam be, de szerintem onnantól boldogulsz.

Oldal: 1 / 1	Minden időpont UTC+02:00 időzóna szerinti
Powered by phpBB® Forum Software © phpBB Limited https://www.phpbb.com/