Submit your widget
HomeTooltipsqTip2 - Powerful tooltips with jquery

qTip2 - Powerful tooltips with jquery

Created 10 years ago   Views 11089   downloads 2494    Author n/a
qTip2 - Powerful tooltips with jquery
View DemoDownload
25
Share |

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

You might also like