qTip2 - Demo - Simple Integration

Replace the default browser tooltips with qTip.

by Hari Menon

HTML

<script src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/demos.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/master.css">
<div id="div1" class="my_div" data-tooltip="Div 1 Tooltip">Div 1</div>
<div id="div2" class="my_div" data-tooltip="Div 2 Tooltip">Div 2</div>
<div id="div3" class="my_div" data-tooltip="Div 3 Tooltip">Div 3</div>
<div id="div4" class="my_div" data-tooltip="Div 4 Tooltip">Div 4</div>
<div id="div5" class="my_div" data-tooltip="Div 5 Tooltip">Div 5</div>
<div id="div6" class="my_div" data-tooltip="Div 6 Tooltip">Div 6</div>

CSS

.my_div{
    margin:0.1em;
    border:0.1em solid #999;
    background-color: #bbb;
}

JavaScript

$('.my_div').qtip({
    content: $(this).data('tooltip'),'bottom middle'
}, style: {
    tip: true,
    classes: 'ui-tooltip-red'
}
});