Okay, I am using the qTip (Stylish jQuery Tooltips) module to add tooltips to my page that has been laid out using inline styles (due to a consistency across browsers issue with the original theme css).

Question: Is there a way to apply complex html inside of qtips tooltips?

I tried inserting HTML and destroyed my page, with just text qtips works perfectly.


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 & 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:

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

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:

<a class="qtip-link" href="#">Text Users See</a><div class="qtip-tooltip" data-qtip-instance="test_tip_top_left"><strong>HTML Content</strong>inserted here</div>

7.) BANG - cool tooltip ;-)

  • This is a workaround I've tried and it works. However this is not the way this module should work. I need to display tooltips when the user hovers over a field label. For this to work I have to mess with the the form's template to add the class and create a new element with the text... – lephleg Apr 15 '16 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.