Csatlakozz te is!

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.

Vissza a bloghoz

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.