Hi, I have the following table:
- <table id="mercancia_list" class="tablesorter">
- <thead>
- ...
- </thead>
- <tbody>
- <tr>
- ...
- <td class="tableButton"><img id="preview_<?=$arrMercancia[$i]['id_mercancia']?>" class="preview_boton_mercancia" src="img/buttons/camera.png" /></td>
- ...
- </tr>
- <div id="img_<?=$arrMercancia[$i]['id_mercancia']?>" class="demotip"><img width="90" height="110" src="<?=$arrMercancia[$i]['foto_mercancia']?>" /></div>
- </tbody>
- </table>
I just left the relevant parts, its just a list of products I get from a DB, each one has and image (thats loaded on the <div>). I'd like to show on a tooltip eveytime the user hovers over the <img> element I placed on the table, heres the script to do that (I'm using the 'live' function because the user can add new products so I dynamically create a new <img> element):
- $('.preview_boton_mercancia').live('mouseover', function() {
- var id = $(this).attr("id").split("_");
- var id_mercancia = id[1];
- $('#preview_'+id_mercancia).tooltip({
- tip: '#img_'+id_mercancia,
- effect: 'fade',
- });
- });
-
- $('.preview_boton_mercancia').live('mouseout', function() {
- var id = $(this).attr("id").split("_");
- var id_mercancia = id[1];
- var tooltip = $('#preview_'+id_mercancia).tooltip('#img_'+id_mercancia);
- tooltip.hide();
- });
This works "almost" as intended the problems are:
1) The tooltip doesn't work on the first hover but after the second time the user hovers the <img> element.
2) It doesn't work at all on dynamically created elements.
You can see an example here:
http://sm-dev.webege.com/ (login: admin / pass:admin)
Go to Registro -> Mercancia and hover over the preview icon.
Is it something I'm doing wrong? Any help will be appreciated.
Thanks in advance!
PD: This is in FF and Safari, in IE and Opera it won't work at all..