I would like to see BigCommerce having some sort of tool-tip functionality added in product page, but until they will implement it we need to dive into the template and create it our selves.
Tooltip: a small "hover box" with information about the item being hovered over.
You may want to add some additional info to the options the products in the store are assigned with. The settings BigCommerce provides at the moment do not allow you to do such a thing. This article will show you how to create tooltips that will show the additional info you need for the options in the store.
How does a tooltip work?
The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear.
How will it look on the store front?
The image below shows a tooltip assigned to a image upload field. It will be displayed only if the question mark is hovered.
How to install the tooltip?
There are 4 easy steps to follow.
- first of all, download this file to your computer (right click and choose "Save link as" or "Save target as"). Open the file using a text editor (Notepad++ recommended) and replace [YOUR DOMAIN] with your actual domain. There is only one reference of [YOUR DOMAIN] in the file
- connect to the server via FTP and open the /content/ directory. Upload the file at the previous step to that directory
- also download this file and upload it to /content/ directory
- log in to your store and open the file called Footer.html. At the end of it you will have to insert a link to the file uploaded via FTP. After inserting the link, save the file. (If you need a hand to elaborate the script link, please insert your store domain in the box below. The link will be automatically generated after pressing Enter)
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
Uploading the tooltip image
The tooltip will be shown if an element in the page is hovered over. The best way is to upload a tiny image as the hovered over element. Here is a sample image you can use. Download it by right clicking on the link and choosing "Save link as" or "Save target as". Connect to the server via FTP and upload the image in the /content/ directory. Please note that the name of the picture must be help.gif
Setting custom messages for the tooltip
When editing/creating a product, there's a box called "Product Description". Please open it using the HTML editor (the last button in the toolbar). All you will have to do is to write down the information to be shown in the tooltip. This can be done using a "span" tag as shown below.
<span id="[OPTION DISPLAY NAME]" style="display:none">[INFO TO BE SHOWN WITH THE TOOLTIP]</span>
Here is the legend:
- [OPTION DISPLAY NAME] is the option name as it appears on the store front. There are some formatting rules though:
- all the letters are lowercase
- all the spaces are hyphens (-)
- all the hyphens are underscores ()
- no special characters (!@#$%^* etc...) are allowed except for '&'
- [INFO TO BE SHOWN WITH THE TOOLTIP] the actual info you want to be shown when the "?" image is hovered over.
Please note that if the message for the tooltip is not set, the system will show the following: "Description not available yet". This can be customized by editing the tooltip.js file.
If you think you cannot handle all these 'span's, do not worry! We have a tool that will help you. All you need to do is to enter the option name (as it's shown on the store front - no formatting rules) and the text you want to display with the tooltip and click "Generate".
| Option Name | |
| Description | |
If you want to see this script in action, hover over these words.
If you have any improvements, or would like to say thanks just comment below!