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.

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

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)