How create a popup on mouseover depending on the item? - php

Question

I want to create a popup depending on the item. The text to appear is taken from the database depending on each item.Specifically, I have this code:
{foreach $images as $item}
<div class="icoana" id="container">
<img class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}">
<div class="detalii">
<table style="font-size: 25px">
<tr><td>Nume:</td><td>{$item->title}</td> </tr>
<tr><td>Lungime:</td><td>{$item->width}&nbsp cm</td> </tr>
<tr><td>Latime:</td><td>{$item->height}&nbsp cm</td></tr>
</table>
</div>
<div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai multe...</div>
</div>
{/foreach}
and when mouseover div class="despre" I want appear a pop-up with text's description stored in {$item->description}. The pop-up I want to look like this: http://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/.I would like a link to an example or source code.

Answer 1

Broadly, what you need to do is two steps
1) Print out the div description in the php code immediately below the div mentioned.
So your code becomes.
{foreach $images as $item}
<div class="icoana" id="container">
<img class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}">
<div class="detalii">
<table style="font-size: 25px">
<tr><td>Nume:</td><td>{$item->title}</td> </tr>
<tr><td>Lungime:</td><td>{$item->width}&nbsp cm</td> </tr>
<tr><td>Latime:</td><td>{$item->height}&nbsp cm</td></tr>
</table>
</div>
<div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai multe...</div>
<div class="desc" style="display:hidden">
{$item->description}
</div>
</div>
{/foreach}
2) After that use the same code in the link you provided above and modify the the display part
$(function() {
$('.despre').hover(function(e) {
//Code to show the popup
// Modify to use any standard popup library
// The code below , for now display the desc only.
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
For now this will show and hide the div. You can use any ToolTip library to actually display the popup
Examples here : http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Regards
Shreyas N