Tag Archives: tooltip

How to Add a Line Break to a ToolTip Tips, Tricks and Tutorials 15 JUL 2014

I sometimes use the fantastic jQuery qTip plugin for some more intelligent HTML tooltips in my web systems, and the other day I came across a need to insert a line break into my tooltip text. It turns out, to achieve this is relatively simple, but the solution is a little harder to find on the web than what it should be.

Translated, I’m saving it here for future reference for myself.

Ignoring the various other ways involving CSS manipulation, etc., one of the easiest ways of adding a line break to your tooltip text is to simply make use of a bog standard HTML entity:

Seriously, that was all I needed to force a linebreak in my HTML tooltip. Problem solved, see?

html banner strip

Related Link: jQuery qTip plugin

Graphing with jQuery CodeUnit 14 FEB 2010

Now while there are quite a number of excellent flash-based graphing libraries out there in the wild, it turns out that there aren’t actually all that many pure old jQuery plugins to churn out your data in pretty images for all to see.

So enter flot, a pure Javascript plotting library written exclusively for jQuery. It produces graphical plots of arbitary datasets on-the-fly client-side, with a focus on simple usage – meaning that all settings are pretty much optional to a developer. The graphs produces are attractive and flot goes that extra step in adding interactive features like zooming and mouse tracking, meaning you can add things like tooltips and clickthroughs to any graph with particular ease.

It works with Internet Explorer (with the help of the excanvas emulation helper), Firefox, Safari, Opera and Konqueror, making use of the HTML canvas tag.

Quick to implement, churns out a variety of different graphs and produces some stunning results, making it a particularly worthy graphing library to implement on any of your data analysis projects! :)

Related Link: http://code.google.com/p/flot/

jQuery Mouseover Tooltips the Easy Way! CodeUnit 30 JAN 2010

Jeff Robbins of Lullabot brings to us a rather nifty jQuery plugin in the form of BeautyTips, a tooltips plugin which uses the canvas drawing element from the HTML 5 spec to draw tooltips/talk bubbles/help balloons that can be associated with any specific HTML element on a web page. These tooltips are highly configurable in terms of look and feel, and can be fired based on a number of different events, including your standard mouseover right the way through to on focus and key up for textboxes!

It works natively with modern versions of FireFox, Safari and Opera, and with a small inclusion of the Explorer Canvas extension created by Google, it even comes to life in Internet Explorer.

Each tooltip that gets drawn is positioned on the side of the target element which has the most free space, meaning that the tooltip responds to window sizing and scroll position, making it quite robust in terms of not getting hidden by smaller windows’ border positioning.

BeautyTip in action: this time fired by clicking on an input text box.

Attaching and using BeautyTip in your site is ridiculously easy.

Simply download and reference the plugin script in the head of your page, and then use a bit of jQuery magic to attach the BeautyTip function to a specific element like so:


And that’s it. Couldn’t be any easier to get a great looking result that is sure to clean up your interface in terms of hiding all those tidbits of help that you keep tossing about the place so! :P

Related Link: http://plugins.jquery.com/project/bt

How to Add a Tooltip to a Flot jQuery Graph CodeUnit 30 DEC 2009

Flot is a fantastic jQuery-driven graphing engine that is extremely flexible and capable of producing some wonderfully looking and interactive graphs.

Today’s quick tutorial looks at how one can add a tooltip to a flot-produced graph.

The secret here is to bind our tooltip generating function to Flot’s built in mouse hover event, firstly removing any tooltip that may already be in existence, generating the new tooltip and attaching it on top of the graph canvas at the correct point.

First we start off by defining our tooltip generating javascript function:

function showChartTooltip(x, y, contents) {
;' + contents + '
;').css( { position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #bfbfbf', padding: '2px', 'background-color': '#ffffff', opacity: 1 }).appendTo("body").fadeIn(200); }

You’ll notice that all we are doing is creating a div, styling it, setting it’s correct x and y co-ordinates in order to correspond to the graph hover position supplied, and then appending it to the main DOM via a jQuery call to append it to the “body” element. As an afterthought and just to make it look nice, we’re using jQuery’s nice little fadeIn functionality to bring the tooltip into view.

Now for the actual meat of the process. What we are going to do is specific the code that needs to be triggered on mouseover (which will call the tooltip drawing function specified above) and bind it to the built in flot plothover event.

$("#graphdivid").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY,'tooltip text to display');
} else {

Binding the plothover event to the graph with id graphdivid, we firstly calculate the current X and Y co-ordinates from the event, check that the result is valid, remove any existing tooltip and then call the tooltip drawing function.

And that’s it. Really simple code in order to achieve quite a useful result!