qTip2 - My test case

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
		<div id="outer">
			<div id="page_header"><img id="header_left" src="/com.lgcf.extranet/media/lgcf/site/header_left.png" alt="" />
<img id="header_right" src="/com.lgcf.extranet/media/lgcf/site/header_right.png" alt="" /></div>
			<div id="page_navigation"><div id="menu_level_1">
	<ul>
									<li><a href="/com.lgcf.extranet/home.cpm">Accueil</a></li>
												<li><a href="/com.lgcf.extranet/admin.page.cpm" class="current">Administration</a></li>
						</ul>
	
	<form id="search_zone">
		<input type="text" placeholder="Search here..." required />
	</form>
</div></div>
			<div id="page_body">
<div id="menu_level_2">
	<ul>
														<li><a href="/com.lgcf.extranet/admin.page!select.do?id=0" title="Display some internal configuration values"><span>System Debugger</span></a></li>
																					<li><a class="current"><span>Examples</span></a></li>
																					<li><a href="/com.lgcf.extranet/admin.page!select.do?id=webdav" title="Display WebDAV informations"><span>WebDAV</span></a></li>
																					<li><a href="/com.lgcf.extranet/admin.page!select.do?id=cms" title="Here you can administer CMS"><span>CMS Administration</span></a></li>
										</ul>
</div>


<div id="menu_level_3">
	<ul>
														<li><a class="current"><span>Overlib</span></a></li>
																					<li><a href="/com.lgcf.extranet/examples.page!select.do?id=1" title="Sortable table"><span>Sortable table</span></a></li>
										</ul>
</div>

<div class="menu_level_3-contents"><a class="test" href="javascript:void(0);" title="Info bulle contenant du texte simple">Test 1 - Info bulle contenant du texte simple</a>
<br/><br/>

<a class="test" href="javascript:void(0);" title="Info bulle contenant de <strong>l'HTML</strong><h5>Titre 5</h5>">Test 2 - Info bulle contenant de l'HTML</a>
<br/><br/>

<a id="test2"...

CSS

/**
	GENERALS
**/

html, body {
	height:100%;
}

body {
	margin : 0px;
	padding : 0px;
	background: url("../media/lgcf/site/background.png") repeat-x top;	
}

body, input, textarea, button, select {
	font-family: Verdana, Helvetica, sans-serif;
    font-size: small;	
}

form {
	margin: 0;
	padding: 0;	
}

a {
	color: #A90118;	
}

a img {
	border: none;
}

label.filter {
	color: #A90118;
}

/**
	OUTER
**/

#outer {
	margin: auto;
	min-height: 100%;
	margin-top: -25px;
}

/**
	HEADER
**/

#page_header {

	border-top: 25px solid;
	height: 106px;
	min-width: 1250px;
	background: url(../media/lgcf/site/header.png) repeat;
}

#header_left {
	float: left;
}

#header_right {
	float: right;
}

/**
	MENU LEVEL 1
**/

#menu_level_1 {
	min-width: 1250px;
	height: 25px;
	background: transparent url(../media/lgcf/site/menu_level1_background.png) repeat-x top left;
	font-size: 13px;
	font-weight: bold;
}

#menu_level_1 ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: auto;
	white-space: nowrap;
	float: left;
}

#menu_level_1 ul li {
	display: inline;
	margin: 0px 1px 0px 0px;
}

#menu_level_1 ul li a {
	display: inline-block;
	color: #FECCC3;
	text-decoration: none;
	padding: 2px 22px 0 22px;
	height: 25px;
}

#menu_level_1 ul li a:hover,#menu_level_1 ul li a.current {
	color: #FFFFFF;
	background: transparent url(../media/lgcf/site/menu_level1_background_over.png) no-repeat top center;
}

#search_zone {
	float: right; 
	margin-right: 5px;
}

#search_zone input {
	background: white url(../media/lgcf/site/search.png) left no-repeat;
	padding-left: 17px;
	height: 15px;
	border-radius: 10px;
	border: 0;
	margin-top: 2px;
}

/**
	MENU LEVEL 2
**/

#menu_level_2 {
	clear: both;
	overflow: hidden;
	min-width: 1250px;
	font-weight: bold;
	font-size: 10px;
    background: #efefef;
	border-bottom: 1px solid #666666;
}

#menu_level_2 ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: auto;
}

#menu_level_2 ul li {
	display: inline;
}

#menu_level_2 ul li a...

JavaScript

jQuery(document).ready(function() {
	jQuery('.test[title]').qtip( {
		prerender: true,
		show: { delay: 1 },
		effect: false,
		position: { my: 'top left', target: 'mouse', viewport: jQuery(window), adjust: { x: 10, y: 10 } }
	});
	
	jQuery('#test2').qtip( {
		prerender: true,
		content : { title : { text : 'Titre', button: true }, text : '<div style=\'background-color: #FCE1B7;\'>Contenu en HTML,  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum velit in massa rhoncus consequat. Cras velit ligula, condimentum quis tempus et, accumsan id orci. Phasellus quis pharetra tellus. Nam a ligula eu orci posuere aliquet nec vel dui. Sed eu lectus id purus volutpat gravida. Donec ut arcu dui. Nam congue justo nec leo fringilla a ornare ante aliquet. Aliquam quis sapien odio.  Nulla nec nisl in nisl posuere hendrerit. Nulla aliquet elit sed massa congue tincidunt. Cras vulputate nibh et diam semper sed lobortis libero faucibus. Suspendisse dignissim aliquet volutpat. Praesent semper nunc ut orci accumsan sollicitudin. Mauris condimentum metus at nibh luctus a ullamcorper arcu vestibulum. Integer porttitor urna at lectus blandit volutpat. Proin non odio nibh. Vivamus eu mauris nisi. Pellentesque et metus ut dui pharetra accumsan. </div>' },
		show: { delay: 1 },
		effect: false,
		position: { at: 'center', target : jQuery( window ), viewport: jQuery(window) },
		hide: 'unfocus'
	});
});