Below is the auto generated HTML of tooltip. We can use each elements classes to target them using CSS and manipulate the default styles of the library and tooltips.

<!-- ARIA properties are detailed on the second line, which are applied for accessibility purposes -->
<div id="qtip-{id}" class="qtip qtip-default qtip-pos-rc" style="z-index: 15001;" tracking="false"
		role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-0-content">

	<!-- content.title must be set for this to be generated -->
	<div class="qtip-titlebar">
	 	<!-- Only generated when content.button is set to true -->
	 	<!-- If content.title is unset, then this will be appended to the .qtip element, see below -->
		<a class="qtip-close qtip-icon" title="{content.button}" aria-label="{content.button}" role="button"> 
			<span class="ui-icon ui-icon-close">&cross;</span>
		</a>

		<!-- Houses the tooltip title -->
		<div id="qtip-{id}-title" class="qtip-title">{content.title}</div>
	</div>
 
	<!-- Only generated when content.button is set to true AND content.title is false -->
	<a class="qtip-close qtip-icon" title="{content.button}" aria-label="{content.button}" role="button"> 
		<span class="ui-icon ui-icon-close">&cross;</span>
	</a>

	<!-- Houses the tooltip content -->
	<div id="qtip-{id}-content" class="qtip-content ui-widget-content" aria-atomic="true">
		{content.text}
	</div>
</div>

Please do not add this manually to your page, it is auto-generated by the library for you.

qTip2 comes with a variety of bog-standard CSS2.1, and rather more elegant CSS3 styles. Depending which you included in your particular build, you can use them throughout your application. Heres a listing:

/* Basic styles */
.qtip-light{} /* Light coloured style */
.qtip-dark{} /* Alternative dark style */
.qtip-cream{} /* Cream-esque style, similar to the default */
.qtip-red{} /* Alert-ful red style */
.qtip-green{} /* Positive green style */
.qtip-blue{} /* Informative blue style */

/* CSS3 styles */
.qtip-rounded{} /* CSS3 border-radius class for applying rounded corners to your tooltips */
.qtip-shadow{} /* CSS3 box-shadow class for applying shadows to your tooltips */
.qtip-bootstrap{} /* Twitter Bootstrap style */
.qtip-youtube{} /* Google's new YouTube style  */
.qtip-tipsy{} /* Minimalist Tipsy style */
.qtip-tipped{} /* Tipped libraries "Blue" style */
.qtip-jtools{} /* jTools tooltip style */
.qtip-cluetip{} /* Good ole' ClueTip style */

You can see a live demonstration of these styles on the main website

You can apply custom classes the the main .qtip element by setting the style.classes option

$('.selector').qtip({
	style: { classes: 'myCustomClass' }
});

.myCustomClass{
	border-color: rgb(0,190,0);
	background-color: #ddd;
}

If you wish to style elements such as the .qtip-content element, simply use descendant selectors like so:

.myCustomClass .qtip-content{
	font-size: 12px;
}

Setting the width and height of a tooltip can be done in two ways:

/* Via CSS, to be applied ot multiple tooltips */
.myCustomClass{
	width: 100px;
	height: 200px;
}

… or specifying it in the style object for specific tooltips

$('.selector').qtip({
	style: {
		classes: 'myCustomClass',
		width: 500, // Overrides width set by CSS (but no max-width!)
		height: 200 // Overrides height set by CSS (but no max-height!)
	}
})

However, please note that the .qtip class has a default max-width: 280px; style that will limit the width!

qTip2 has full support for jQuery UI Themeroller styles, and is controlled on a per-tooltip basis (disabled by default) using the style.widget property.

$('.selector').qtip({
	content: 'I won\'t be styled by the pages Themeroller styles',
	style: {
		widget: true, // Use the jQuery UI widget classes
		def: false // Remove the default styling (usually a good idea, see below)
	}
})

It's also often beneficial when using Themeroller styles to prevent the default tooltip styles being applied, which can be done by setting the style.def option to false.