qTip2 - Demo - Simple Integration

Replace the default browser tooltips with qTip.

by cristianromagnoli

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 class="ttip">
        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, 
        such as position and <a href="/wiki/Momentum" title="Wikipedia: Momentum">momentum</a>, cannot be simultaneously known to arbitrarily high precision. That is, the more precisely one property is measured, the less 
        precisely the other can be measured.
    </p>
    
    <p>
        Published by <a href="/wiki/Werner_Heisenberg" title="Wikipedia: Werner Heisenberg">Werner Heisenberg</a> in 1927, the principle means that it is impossible to <i>determine</i> simultaneously both the position and the
        momentum of an electron or any other particle with any great degree of accuracy or certainty. This is not a statement about researchers' ability to measure the quantities. Rather, it is a statement about the
        system itself. That is, a system cannot be <i>defined</i> to have simultaneously singular values of these pairs of quantities. The principle states that a minimum exists for the product of the uncertainties
        in these properties that is equal to or greater than one half of the <a href="/wiki/Reduced_Planck_constant" title="Wikipedia: Reduced Planck constant">reduced Planck constant</a>
        (<i>ħ</i>&nbsp;=&nbsp;<i>h</i>/2π).
    </p>

    <p>
        In quantum physics, a particle is described by a <a href="/wiki/Wave_packet" title="Wikipedia: Wave...

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').qtip({
        content: {
            text: $('.ttip')
        },
        position: {
            my: 'top center',
            at: 'bottom center'
        },
        hide: {
            delay: 500,
            fixed: true
        },
        show:{
            solo:true        
        }        
    });
});