qTip2 - Demo - Simple Integration

Replace the default browser tooltips with qTip.

by godhong

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="demo-simple" class="box">

    <h3>Uncertainty principle</h3>

    <p>
        In <a href="/wiki/Quantum_mechanics" title="Wikipedia: Quantum mechanics">quantum mechanics</a>, the <b>Heisenberg uncertainty principle</b> states by precise inequalities that certain pairs of physical properties
    </p>
</div>

CSS

/* Set a slightly bigger max-width so we can fit in our photos */
.ui-tooltip-flickr{
    max-width: 700px;
}

    /* Adds the flickr favicon to the top right of the tooltip :) */
    .ui-tooltip-flickr .ui-tooltip-titlebar{
        background-image: url('http://l.yimg.com/g/favicon.ico');
        background-repeat: no-repeat;
        background-position: 97% 7px;
    }

    .ui-tooltip-flickr .ui-tooltip-title{
        padding-right: 0;
    }

    .ui-tooltip-flickr img{
        margin: 0 auto;
    }

JavaScript

$(document).ready(function()
{
    // Match all <A/> links with a title tag and use it as the content (default).
    $('a[title]').qtip();
});