Changing text font-size and color for jQuery qTip popups

Found this really awesome Javascript library to enable context-sensitive help popups appear on webpages. With just a few lines of code, it becomes really easy to add context-sensitive help.

http://craigsworks.com/projects/qtip/

Changing the font-size and color took me a while to figure out. The documentation made it seem I would need to modify the ‘content’ property of the style object, but alas that does not work. Below is a working example:

$.fn.qtip.styles.tipStyle = {
name: 'cream',
tip: true,
border: {
width: 2,
radius: 4
},
'font-size': 12,
'color': 'red',
width: 450
};

$('#targetItem').qtip({
content: "Please type a decimal fraction inside the below box",
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
},
style: 'tipStyle'
});

You’ll notice two things:

  • The ‘$.fn.qtip.styles’ object is used to declare a global style, which can be reused. The name of my style in the above example is tipStyle
  • The ‘font-size’ property must be an element of the style object, and not the content object within the style (as I had previously tried to make work)