How to create tip clouds (tooltips) in PrestaShop?

2016-08-20 cloud, jquery, PHP, tooltip

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:

tooltip in prestashop


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!

 

 

 

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim