Style

Style tweak the appearance of your tooltips

The style object allows you to assign custom classes to the main qTip element, as well as Themeroller and tip options when using the tips plugin

style.classes

Values

"String", false (Default: "")

Overview

A space separated string containing all class names which should be added to the main qTip element. There are several base styles included in the CSS file provided, including:

/* CSS2 styles */
qtip{ } /* This one is applied by default (formally the "cream" style) */
qtip-plain{ }
qtip-light{ }
qtip-dark{ }
qtip-red{ }
qtip-green{ }
qtip-blue{ }

/* CSS3+ styles */
qtip-shadow{ } /* Adds a shadows to your tooltips */
qtip-rounded{ } /* Adds a rounded corner to your tooltips */
qtip-bootstrap{ } /* Bootstrap style */
qtip-tipsy{ } /* Tipsy style */
qtip-youtube{ } /* Youtube style */
qtip-jtools{ } /* jTools tooltip style */
qtip-cluetip{ } /* ClueTip style */
qtip-tipped{ } /* Tipped style */

Examples

Create a tooltip with the included blue theme and a shadow:

$('.selector').qtip({
	content: {
		text: 'I\'m blue... deal with it!'
	},
	style: {
		classes: 'qtip-blue qtip-shadow'
	}
});

---

style.def

Values

true, false (Default: true)

Overview

This property allows you to prevent the .qtip-default class from being applied to the main tooltip element.

Notes

• Setting this to false will cause the tooltip to have no visual styling if you haven't applied any custom classes

---

style.widget

Values

true, false (Default: false)

Overview

Determines whether or not the ui-widget classes of the Themeroller UI styles are applied to your tooltip

Notes

• For more information on Themeroller classes checkout their documentation

See also

• style.classes

---

style.width

Values

"String", Integer, false (Default: false)

Overview

This property allows you to override all applied CSS width styles for the tooltip. Can be any valid width CSS value. Please note that this does not override max/min width styles! Change those in the CSS file provided.

Notes

• Again, this does not override max/min width styles!

---

style.height

Values

"String", Integer, false (Default: false)

Overview

This propery allows you to override all applied CSS height styles for the tooltip. Can be any valid width CSS value. Please note that this does not override max/min height styles! Change those in the CSS file provided.

Notes

• Again, this does not override max/min height styles!

---

style.tip

Overview

Defines the tooltip's tip properties. See the plugin documentation for more information.