<div class="bg-product">
<a href="#" class="product-tooltip" description="- Màn hình: LED-backlit IPS LCD, 5.5 inch, Retina HD<br/>- Hệ điều hành: iOS 10<br/>Camera sau: 2 camera 12MP<br/>- Camera trước: 7MP" productname="Điện thoại iPhone 7 32GB" thumbnail="https://bizweb.dktcdn.net/100/005/795/files/iphone-78-400x460.png?v=1499659742503">
<img src="https://bizweb.dktcdn.net/100/005/795/files/iphone-78-400x460.png?v=1499659742503">
</a>
</div>
<div id="productReviewPopup" style="display: none;"></div>
.bg-product{
height: 100%;
text-align: center;
}
.bg-product:before{
content: "";
display:inline-block;
height: 100%;
vertical-align: middle;
}
#tooltip
{
position: absolute;
z-index: 10102;
border: 1px solid #111;
background-color: #FFF;
padding: 5px;
border: solid 3px #cccccc;
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
width: 300px;
}
.tooltip_name
{
font-size: 14px;
font-weight: bold;
color: #003399;
padding: 5px 10px;
width: 320px;
}
.tooltip_picture
{
text-align: center;
}
.tooltip_picture img
{
text-align: center;
}
.tooltip_description{
font-size: 12px;
font-family: arial;
margin: 5px 0;
}
.product-tooltip{
border: 1px solid #ddd;
padding: 5px;
display: inline-block;
vertical-align: middle;
}
.product-tooltip img{
max-height: 220px;
}
$(function () {
$(".product-tooltip").each(function () {
var productname = $(this).attr("productname");
var thumbnail = $(this).attr("thumbnail");
var description = $(this).attr("description");
$(this).bind("mouseover", function () {
var returnHtml =
"<div class=\"tooltip_name\">" + productname + "</div>" +
"<div class=\"tooltip_picture\">" +
"<img src=\"" + thumbnail + "\" title=\"" + productname + "\" alt=\"" + productname + "\" />" +
"</div>" +
"<div class=\"tooltip_description\">" + description + "</div>";
$("#productReviewPopup").html(returnHtml);
});
$(this).tooltip({
track: true, delay: 50, showURL: false,
bodyHandler: function () {
return $("#productReviewPopup").html();
}
});
});
});
<script type="text/javascript" src="//bizweb.dktcdn.net/100/005/795/themes/534730/assets/jquery-2.2.4.min.js?1495533194821"></script>
<script type="text/javascript" src="//bizweb.dktcdn.net/100/005/795/themes/534730/assets/jquery.tooltip.min.js?1499661805757"></script>
