Adding jQuery tooltips

08 Add some style

We’ve got the default appearance just now, but we don’t have to stick with that. There are several built-in styles we can take advantage of, or we can build our own styles. Let’s start with the built-in styles. Change your code to read as follows:

<script type=”text/javascript”>
$(document).ready(function()  {
$(“a”).qtip(    {
content: ‘This is a qTip pop-up’,
position: {
corner: {
target: ‘topRight’,
tooltip: ‘bottomLeft’
}
},
style: {
name: ‘dark’
}
});
});
</script>

09 Other style options

Your tooltip is now a shade of dark grey. Other options built into the plug-in include red and blue. Creating your own styles is as simple as specifying values for the different attributes such as border width, background colour and so on. Change your code to read as below:

<script type=”text/javascript”>
$(document).ready(function()  {
$(“a”).qtip(    {
content: ‘This is a qTip pop-up’,
position: {
corner: {
target: ‘topRight’,
tooltip: ‘bottomLeft’
}
},
style: {
width: 200,
padding: 5,
background: ‘#A2D959’,
color: ‘black’,
textAlign: ‘center’,
name: ‘dark’
}
});
});
</script>

10 Defining inheritance

You will have noticed that we still specified the dark theme at the end of the previous block of code. This
acts as a kind of fall back inheritance option – anything that we haven’t specified style-wise is picked up from
the dark style. This is particularly useful as we can build our styles using the built-in options as a template to
start from.

11 Replace the title attribute

Up until now we’ve been passing in content to our tooltips, but really the most useful functionality qTip offers is the ability to make more of the humble title attribute. Thankfully it’s really easy to get the tooltip content from the title attribute of a link. Alter your code so that it looks like the code below:

<script type=”text/javascript”>

$(document).ready(function()  {
$(“a”).qtip(    {
content: {
text: false
},
position: {
corner: {
target: ‘topRight’,
tooltip: ‘bottomLeft’
}
},
style: {
width: 200,
padding: 5,
background: ‘#A2D959’,
color: ‘black’,
textAlign: ‘center’,
name: ‘dark’

}
});
});
</script>

12 Degrade gracefully

The primary consideration when adding aesthetic polish to a piece of content that conveys important information is how that degrades if the browser has JavaScript disabled, or styles turned off. Thankfully with the code we’ve just created the browser will revert to standard HTML title tags and tooltips, so we’ve got code that degrades nicely.

13 Rounded corners and tips

We’ve barely touched on all the options available within the qTip framework. Experiment with the code below to set border width, rounded-corner radius, create a speech-bubble tip and more:

<script type=”text/javascript”>
$(document).ready(function()  {
$(“a”).qtip(    {
content: {
text: false
},
position: {
corner: {
target: ‘topRight’,
tooltip: ‘bottomLeft’
}
},
style: {
width: 200,
padding: 5,
background: ‘#A2D959’,
color: ‘black’,
textAlign: ‘center’,
border: {
width: 3,
radius: 8,
color: ‘#6699CC’
},
tip: ‘bottomLeft’,
name: ‘dark’
}
});
});
</script>

Pages: 1 2 3