Csatlakozz te is!

A közösséghez

 
 
G-PHÁZ HÍRFOLYAM

EGYSZERŰ TOOLTIP

Számos tooltip scriptet találhattok a neten, de úgy gondoltam, hogy hétvégére hozok nektek egy nagyon egyszerű, mégis látványos tooltipet, ami jQuery és CSS alapokra épül. A tooltip eredetijét ITT találjátok, de hogy egyszerűbb legyen a dolgotok, hoztam saját példát és egyszerűbb kódot is a script alkalmazásához.

A következő bekezdésekben kékkel jelöltem azokat a szavakat, amikre ha ráviszed a kurzort, máris láthatod a tooltipet.
 

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, congue a imperdiet eu, lobortis in erat. Sed blandit lacus ac justo ultrices dapibus. Pellentesque at dui quis felis pretium pretium ut non lorem. dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, congue a imperdiet eu, lobortis in erat. Sed blandit lacus ac justo ultrices dapibus. Pellentesque at dui quis felis pretium pretium ut non lorem.

Praesent commodo massa ut metus tempor bibendum. Sed nisl tellus, facilisis quis ultricies lacinia, hendrerit nec tortor.Ide jön a tooltip tartalma

Alapok a tooltip kód használatához

Ahhoz, hogy a kód működjön, fontos, hogy elhelyezd a portálodon az előbbi cikkben is említett jquery.js fájlt az alábbi módon:

<script type="text/javascript" src="/js/jquery.js"></script>

Ha a fenti kód nincs fennt a portálodon pl. a fejléc modulodban vagy a bal felső egyszerű modulodban, a tooltip nem fog működni. Azért javaslom inkább a fejléc modult, mert a fenti jquery.js scriptnek először kell lefutnia, mint a lenti tooltip scriptnek, és a fejléc modul tölt be legelőször.

A tooltip kód

Az alábbi javascriptből, css-ből és bekezdésekből áll a popup kódja. Fogd az alábbi kódot, és másold be egy az egyben valamelyik modulod forrásába, és egyből működni fog.

<script type="text/javascript">

$(function() {

$('.tip_trigger').each(function() {
var tip = $(this).find('.tip');

$(this).hover(
function() { tip.appendTo('body'); },
function() { tip.appendTo(this); }
).mousemove(function(e) {
var x = e.pageX + 20,
y = e.pageY + 20,
w = tip.width(),
h = tip.height(),
dx = $(window).width() - (x + w),
dy = $(window).height() - (y + h);

if ( dx < 20 ) x = e.pageX - w - 20;
if ( dy < 20 ) y = e.pageY - h - 20;

tip.css({ left: x, top: y });
});
});

});

</script>

<style type="text/css">
.tip {
color: #fff;
background:#1d1d1d;
padding:10px;
position:absolute;
z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.tip_trigger .tip { display:none; }
</style>

<p>
    <a class="tip_trigger" href="#">Erre a tartalomra ugrik fel a tooltip<span class="tip" style="width: 400px;"><img alt="" src="
//gportal.gportal.hu/portal/gportal/image/gallery/1304079098_52.jpg" style="float: left; margin-right: 20px; width: 150px; height: 150px;" />Ide írd a tooltip tartalmát</span></a></p>
<p>
   
<a class="tip_trigger" href="#">Erre a tartalomra ugrik fel a tooltip<span class="tip">Ide írd a tooltip tartalmát</span></a></p>

A kódban találsz egy css-t, ahol a .tip classnál kedvedre színezheted a tooltip betű- és háttérszínét, megadhatod a paddingokat stb, tehát úgy variálod, ahogy szeretnéd.

A css alatti bekezdésekben zölddel jelöltem azokat a tartalmakat, amik megjelennek a portálon, pirossal pedig a tooltip tartalmait. Az első bekezdésben található tooltip egy képet és egy szöveget is tartalmaz. Természetesen az összes megjelenő tartalmat cseréld le a sajátodra, de amennyiben képet is szúrnál a tooltipbe, az első bekezdésben található képet egyszerűen cseréld le a sajátodra.

A tooltip szélességét a kékkel jelölt width értéknél állíthatod be, de ki is szerdeheted a width értéket, ha úgy tetszik.

7 hozzászólás
Csak regisztrált felhasználók írhatnak hozzászólást.
Utolsó hozzászólásokÚjabbak 1 KorábbiakLegelső hozzászólások
2011.04.29. 17:05
Márkó

Neeee! okéköszönöm!


2011.04.29 16:12
superuser

„ http://www.jquery-plugins.hu/demo/31/tab-down-1.html -> forrás


2011.04.29 15:45
Márkó

„ Én így se tudom, a tegnapi kódot honnan szülted. 
Szuperul műxik, de ha elárulnád hogy ez a rész hol volt benne, amivel kipótoltad, megköszönném 

2011.04.29. 16:12
superuser

http://www.jquery-plugins.hu/demo/31/tab-down-1.html -> forrás


2011.04.29 15:45
Márkó

„ Én így se tudom, a tegnapi kódot honnan szülted. 
Szuperul műxik, de ha elárulnád hogy ez a rész hol volt benne, amivel kipótoltad, megköszönném 

2011.04.29. 15:46
PopArt

,hát dehogy nem. Olvassuk, csak nehéz a " fordítás" -nekem.


2011.04.29 15:29
superuser

„ Nem nagyon olvassátok el a cikket, ha egy ilyen nem tűnik fel: szerdeheted

2011.04.29. 15:45
Márkó

Én így se tudom, a tegnapi kódot honnan szülted. 
Szuperul műxik, de ha elárulnád hogy ez a rész hol volt benne, amivel kipótoltad, megköszönném 

2011.04.29. 15:41
superuser

Nem ez a cél, de ahhoz, hogy ráérezzetek az ízére, be kell mutatnom picit a jQuery-ben rejlő lehetőségeket, mert különben azt se tudjátok mi van :D

2011.04.29. 15:29
superuser

Nem nagyon olvassátok el a cikket, ha egy ilyen nem tűnik fel: szerdeheted

2011.04.29. 15:19
Figi

Höh. Nem unatkozik ám, áá, nem. Ígyfolytatod hamarosan, mindenki rádír, hogy mit hogyan kell csinálni :D. Viszont ez jó, ennek hasznát veszem. Lájk

Utolsó hozzászólásokÚjabbak 1 KorábbiakLegelső hozzászólások
 

 
KEDVENC KÉP

Küldj be Te is képet! >>>

 
TÁRSALGÓ
 
HÍRFOLYAM
Friss hozzászólások
 
SZAVAZÁS
Te varázsoltál tavaszi kinézetet a portálodra?

Igen
Nem
Szavazás állása
Lezárt szavazások
 
HÍRLEVÉL
E-mail cím:

Feliratkozás
Leiratkozás
SúgóSúgó
 
TÁMOGATÓK

AndreaSerlegBolt
UIP Duna Nemzetközi FIlm Kft
Horgolt Csoda
Moments