qTips and removing inline styles
Okay for the noobies looking for tooltips like me...  The documentation for qTip (Stylish jQuery Tooltips) is a bit misleading and on first read you might think that must implement the tooltip via input filter.  While implementing via input filter is "quick &amp; dirty", it doesn't allow you to enter any html in the tooltip and also inside your wysiwyg editor you see the tooltip text displayed in the textarea, which destroys the W-Y-S-I-W-Y_G experience.  

From the project page if you want to see demos, you are taken to the qTip2 plugin page, which shows great demos, which are programmatically implemented are 100% NOT useful to implement qtip styled tooltips on your page.  You can implement programmtically, but then you have to CSS style the tip on your own.  

My Solution: 

1.) Install the qTip (Stylish jQuery Tooltips) and create an instance (style) of tooltip that you want to use.

2.)After you save your style, you will be taken back to landing page of the module, which lists the qtip instances (styles) that you have saved.

3.) right-click on this page and select "view-source". In the source code of the page find the name of your saved qtip instance (for example, "test_tip_top_left"). It should look something like this:

&lt;span class="qtip-link"&gt;Sample text&lt;/span&gt;&lt;span class="qtip-tooltip" data-qtip-instance="test_tip_top_left"&gt;This is an example of how this qTip instance will look and function throughout the website.&lt;/span&gt;


4.) attach the class="qtip-link" attribute to your desired page element, then immediately following the element add a div with the attributes class="qtip-tooltip" data-qtip-instance="test_tip_top_left" and add your desired html content inside the div.

5.) Via theme's style.css (assuming it is used inside your wysiwyg content editing area), create a style to hide the display of the div containing your html tooltip content (if you don't, your tooltip will work, however in your wysiwyg editor the div html tooltip content will be displayed again destroying the WYSIWYG experience), something like:

.qtip-tooltip { display: none; }


6.) Attach the tooltip to an element in your page:

&lt;a class="qtip-link" href="#"&gt;Text Users See&lt;/a&gt;&lt;div class="qtip-tooltip" data-qtip-instance="test_tip_top_left"&gt;&lt;strong&gt;HTML Content&lt;/strong&gt;inserted here&lt;/div&gt;


7.) BANG - cool tooltip ;-)