Home TooltipsqTip2 - Powerful tooltips with jquery

qTip2 - Powerful tooltips with jquery

11 years ago Views

11661

2637

n/a

Getting Started

Now you have the jQuery library and qTip2 files, it's time to include them within your HTML. I highly recommend that all non-essential (i.e. non-library) JavaScript includes be placed just before the end </body> tag as this ensures the DOM is loaded before manipulation of it occurs, and the scripts don't block other resources. This isn't a requirement, simply an insiders tip!

<html>
<head>
<title>My site</title>
<!-- jQuery in the head (ideally) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.css" />
</head>
<body>

<!-- Include either the minifed or production version, not both -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.js"></script>

<!-- Optional: imagesLoaded dependancy to better support images inside your tooltips -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.1/jquery.imagesloaded.min.js"></script>
</body>
</html>

Content guide

qTip2 supports the use of regular old browser text, as well as complex HTML, but what are the best ways of actually providing qTip2 with the content? Element attributes? Hidden text? It really depends upon your specific scenario, but here's some basic examples to get you started

javaScript String

If you just want a common piece of text shared between all your tooltips, you can supply qTip2 directly with a JavaScript String

$('a').qtip({ // Grab some elements to apply the tooltip to
    content: {
        text: 'My common piece of text here'
    }
})

title attribute

If you plan on using qTip2 as simply a very thin replacement of the browser tooltips, the title attribute is a great way to do so. It's standards compliant, it's the expected place for tooltip text, and the plugin will automaically look there for it's content if none is given inside your .qtip({ ... }) config object!

$('[title]').qtip(); // Grab all elements with a title attribute, and apply qTip!
$('[title!=""]').qtip(); // A bit better. Grab elements with a title attribute that isn't blank.

This is the simplest method of using qTip2 , as it requires very little setup and works to replace existing, native tooltips auto-magically!

custom attribute

If for some reason you can't use the title attribute, or you'd like to use a different attribute for your tooltip text, then you can easily tell qTip2 not to look in the title attribute by default, by setting the content.attr config property. For example, say we're using a custom data- attribute named data-tooltip:

$('[data-tooltip!=""]').qtip({ // Grab all elements with a non-blank data-tooltip attr.
    content: {
        attr: 'data-tooltip' // Tell qTip2 to look inside this attr for it's content
    }
})

Tag: tooltips