JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/tooltip-generic.css">
<div id="tooltip" class="tooltip">
Remove this row.
</div>
<div class="cont_l"><div class="cont_l_pos">
<div class="inf_bl_s_pos">
<table class="inf_tbl" width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>Реклама</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="ctl00__cphContent__rprAdvertisementActual_ctl01__pnlGood">
<p>Товар <a href="#">Apple Magic mouse</a></p>
</div>
</td>
</tr>
<tr class="on">
<td>
<div id="ctl00__cphContent__rprAdvertisementActual_ctl02__pnlGoodAndShop">
<p>
Товар <a class="test" href="#">Google Nexus</a> в магазине
<a href="#">Первый магазин</a>
</p>
...
CSS
#tooltip {
width:100px;
background-color:#3d7483;
padding:5px;
font-size:11px;
}
div.inf_bl_s_pos {
padding:0px 1px 0px 1px;
border:solid 1px #d6d6d6;
background:#fafafa;
}
JavaScript
$(function() {
// setup tooltip for a single DIV element
$(".test").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
//position: 'center left',
// move tooltip a little bit to the right
offset: [0, -15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
});
$("#mytable img").click(function() {
// get handle to the current image (trashcan)
var img = $(this);
// gradually hide the parent row
img.parents("tr").fadeOut(function() {
// after the row is deleted, hide our tooltip using the tooltip API
img.data("tooltip").hide();
});
});
});