Working with properties tooltips

It is useful to have properties information available on the front end to help readers fully understand the data in the products specification. Plugin allows you to create tooltips and also display them using qTip2 for jQuery or by making your own custom display.

Tooltip Editor
Tooltip Editor

To create tooltips, you need to start with properties editor for the product type. Starting from plugin version 1.0.2, editor has a new icon and a new dialog to show the tooltip editor. Third icon for each property or group will show the editor.

Tooltip Example with qTip2
Tooltip Example with qTip2

You can use HTML in editor (no PHP is allowed). With all default tooltip rendering active, this will be displayed on the frontend as on the image on the left.

There are several ways you can display tooltips through plugin only, and you can also customize it using your own tooltips library.

When plugin displays the element that is used to show tooltip for (by default it is small blue information icon), this element contains two tooltip content elements. One is title attribute with the plain text version of the tooltip content (HTML stripped), and the other is qtip-content attribute with full HTML version of the tooltip content. But, you can completely change the appearance of this element by overriding the function gdpc_render_tooltip_tag(). This function renders element that holds tooltip content, and it accepts one parameter: $property. This is object describing each property for product specification. You can create your own function and place it in the theme functions.php, and it will be used instead of the default one.

If you want to see how this function looks like, you can find it in the template.php file in code/public folder.

Default: Using qTip2 for jQuery

If you make no changes to the plugin settings, tooltips will be displayed using qTip2 tooltips library for jQuery. If you use this method, plugin will load two extra files, one is JS with the library and other CSS for styling. If you use your own version of qTip2 (some theme load it), you can disable loading of qTip2 from plugin settings.

For this library to work, a jQuery code is need to actually display the tooltip. By default, plugin display tooltip as black with rounder borders and shadow on the left of the tooltip element using value from qtip-content attriburte. If you want to change how the tooltip looks, you need to override the function that adds jQuery code for this. This function is gdpc_render_tooltip_js(). To make your own version, consult the qTip2 documentation. Here is the example you can add to your functions.php file for the theme to display tooltip qith qTip2 on the right, with red color scheme:

[php]function gdpc_render_tooltip_js() { ?>
<script type=’text/javascript’>
jQuery(document).ready(function() {
var qtip_data = {
content: {
text: function(api) {
return jQuery(this).attr("qtip-content");
position: {
my: "left center", at: "right center", adjust: {x: 10}
style: {
widget: true, classes: "ui-tooltip-shadow ui-tooltip-rounded ui-tooltip-red"

<?php }[/php]

Tooltip Controls
Tooltip Controls

Plain tooltip, with no qTip2

Simply disable qTip2 integration and the tooltip elements will be rendered and will display tooltip through browser normal tooltip handling based on the title attribute (no HTML formatting). Disable both options for tooltip settings, and that’s it.

Using your own tooltips library

There are many different JavaScript libraries to display styled tooltips. If you want to handle display of the tooltips your own way, simply disable both tooltip options and load your own code through your theme and add code to display the toolbar. If you need tooltip element to look differently, simply write your own gdpc_render_tooltip_tag() function to display tooltip as you need it.


Leave a Reply