How to create tip clouds (tooltips) in PrestaShop?

As you probably know - i've got commercial module to create tooltips. This module contains a lot of advanced feature to define custom tooltips. But this guide is not about it - in this guide i want to show you absolutely free way to create tooltips. So If you're looking for free solution that will give you possibility to create tip clouds (tooltips) in your PrestaShop - this is the right article and you just have to read it :). At the begining let's clarify what tooltip is exactly. In simple words tooltip is a feature that can be attached to any element in website - when you will move mouse over the element with "tooltip" special script will display fancy little box with additional informations. Example of tooltip you can find below:

How to create tooltips in PrestaShop?

Whole process requires a little code changes, but these changes will be really minor so you don't need advanced coding skills. Just follow steps below and you will get your tooltips working! Guide contains 4 steps:

1. controller modification,
2. javascript modification,
3. css styles modification
4. step related to .tpl file change or usage of any kind of html module (even free ones).

Please follow steps carefully because each of them are necessary to make tooltip works properly. If you will have some questions - feel free to comment this article and I will reply with some suggestions / additional informations. So, let's start :-)

1. Controller modification

We need to include ui.tooltip jquery plugin to our front office. To do this we need to add special code to classes/controller/FrontController.php file. Please open it and search for SetMedia() function. Usually it is near 939 line. Inside this function you can find several lines of code equal to:

$this->addCSS(_THEME_CSS_DIR_.'grid_prestashop.css', 'all');  // retro compat themes 1.5.0.1
$this->addCSS(_THEME_CSS_DIR_.'global.css', 'all');
$this->addJquery();
$this->addJqueryPlugin('easing');
$this->addJS(_PS_JS_DIR_.'tools.js');
$this->addJS(_THEME_JS_DIR_.'global.js')

At the end of this code add one line that will include ui.toolip plugin to your shop front office:

$this->addJqueryUI('ui.tooltip');

And save changes to this file. Optionally - and i strongly suggest it - instead of modification of core files - you can use overrides mechanism. Just take it into account :)

2. Modification of java script global.js file

So, your front office contains now ui.tooltip plugin. Its time to assign it to selected items on your website. To do this we need to alter global.js file that is available in your theme directory, for default theme path to file is: themes/default-bootstrap/js/global.js. At the end of this file paste this code:

$(document).ready(function(){
    $('.mytooltip').tooltip();
});

What this code means? It means that each element will class="mytooltip" will be an element with tip cloud. So now you can easily show tooltips on your website. But we need to add some css styles to make it appears with the design we want.

3. CSS styles modification

This part of tutorial is related to appearance things. We need to display tooltip above the element, with black background and some shadow. To create such style we need to use CSS styles that will be included everywhere. In this case we have to alter theme global.css file. Path to file (if you use default theme) is: /themes/default-bootstrap/css/global.css. Open this file and at the end of it paste dedicated for tooltip css styles:

/* Tooltip text */
.tooltip {
  position: absolute;
  border: 2px solid #C0C0C0;
  color: #FFFFFF;
  Background: #333;
  background: rgba(0,0,0,.8);
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 12px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 1px 12px 5px rgba(0,0,0,0.75);
  box-shadow: 1px 1px 12px 5px rgba(0,0,0,0.75);
}
.tooltip:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #c0c0c0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

Save changes to this file and you can go to the next step. Your shop is ready to display tooltips with defined appearance settings so you can build an element that will have a tooltip. How? just check next step in this guide related to creating elements with tip cloud.

4. How to create an element with tooltip?

From technical point of view your shop is ready to dispaly tooltips for elements with class="mytooltip". I will show you how to use free html box module to create a link with tip cloud feature that will pops once you will move mouse over the link. Of course you can use any other module, or even better: you can alter your theme .tpl files to create such elements. Just remember about class="tooltip" and title="" as a html markups inside your links. Title="" contains a text that will appear inside tip cloud. Steps to build element with tooltip in our free content box module:

1. Please open free html box module configuration page
2. From left hand side menu select position where you want to display the link with tip cloud (for this tutorial i selected displayNav)
3. To the content box paste code that I share below:
   

   <div class="header_user_info">
   <a href="#" title="That's what the tooltip is" class="mytooltip">Tooltips</a>
   </div>

4. save changes
5. that's all, your button with tooltip feature is now available :)

What to do if you want to add tooltip element to your .tpl files?

If you want to add some tooltips to elements that already exist in your shop you have to alter your theme / module .tpl files. If you want to create element like a link with tooltip then you have to open target .tpl file and paste code from below. It is worth to mention that with this shortcode you will be able to translate tooltip element then with default feature to create translations in prestashop. 

<div class="header_user_info">
<a href="#" title="{l s='My translatable tooltip contents}" class="mytooltip">{l s='Tooltip'}</a>
</div>

Hope that you will find this article with step by step guide helpful, if some parts are not clear enough, or if you've got some questions - leave your comment below. I will definitely try to help. Thank you for your time!