MINTA:
Húzd ide az egeret! Példa :)
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.
|
Példa :)
Friss hozzászólások