incidence

Digitalblend-CL

Tool-tips in Magento

Tooltips in Magento using Prototype and Scriptaculous

Adding JavaScript animated tooltips without using a extra set of JavaScript libraries is very easy in Magento. Since Magento is already using Prototype and Scriptaculous, we don't need add Mootools or jQuery to make animated tooltips, we just need to take advantage of the javascript libraries that are already built in.

 

Click here to view the article.

I was searching for a way to add animated tooltips to one of me designs when I came across a tip on StackOverFlow.com to get this job done. The article pointed out that since Prototype is already in Magento why not use it, what I found is that a small piece of trigger script is all that's required.

tooltips JavaScript code

I changed the trigger script's function id and added it the CMS Block that all of the code sits in. You will have to do the work of building them menus and the CSS to create the tooltip, when you are ready, you will put this below the Opentag or at the top of the CMS Block.


$('tooltip').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});

tooltips CSS

In order for the tooltips to work, I had to absolutely position the menu and the nearby elements in the website, this way the tooltip will not pop under the images or text in the website. After absolutely positioning all of the elements I had to z-index the tooltips and all of the nearby elements. You will have to play with the top and left position to move your tooltip into position.

In general, all of the HTML elements l like the header modules, nav bar, sliders, forms, product images and drop down menus that are around the tooltip are absolutely positioned with a z-index assigned.

The remaining parts of the code define the images and the size of the table, table rows, tables, we also need to link the border images, hide the tooltip during the inactive state, set the background color and text color.


/*** div.std { height: 140px; } ***/
div div.cont1 { 
z-index: 950; 
position: absolute; 
top: 0; 
left: 0px; 
}
.bubbleInfo.first { 
z-index: 950; 
width: 220px !important; 
position: absolute; 
top: 0; 
left: 0; 
}

div div div.bubbleInfo div#bubbleTitle { 
border: none; 
margin: 0 2px; 
z-index:  900; 
width: inherit; 
}
div div div.bubbleInfo div#dpop { 
border: none; 
margin: 0 2px; 
z-index: 900; 
min-width: 100px; 
}
div div.cont1 .bubbleInfo div#dpop { 
Width: 275px; 
}

#chat { position: absolute; }
#chat ul > li { list-style: none; }
#chat .tooltip { 
display: none; 
position: absolute; 
top: 30px; 
left: -30px; 
z-index: 900; 
}
#chat:hover .tooltip, #chat:active .tooltip { display: block; }
#chat .arrow { z-index:  970; }
#chat .arrow img { z-index:  970; }
#chat td.corner { height: 15px; width: 19px; }

.tooltip td#topleft { 
background: url('../images/bubble-3.png') top left no-repeat; 
z-index: 9070; 
height: 29px; 
width: 19px; 
}
.tooltip td.top { 
background: url('../images/bubble-2.png') top left repeat-x; 
z-index: 970; 
height: 29px; 
}
.tooltip td.top img { 
display: block; 
margin: 0 auto; 
z-index: 9070; 
}
.tooltip td#topright { 
background: url('../images/bubble-1.png') top left no-repeat; 
z-index: 9070; 
height: 29px; 
width: 19px; 
}
.tooltip td.left { 
background: url('../images/bubble-4.png') top left repeat-y; 
z-index:  9070; 
float: none !important; 
}
.tooltip tbody tr td.cbg { 
background-color: white !important; 
font-size: 11px; 
line-height: 1.2em; 
color: #777; 
font-family: sans-serif; 
}
.tooltip td.right { 
background: url('../images/bubble-5.png') top left repeat-y; 
z-index:  9070; 
float: none !important 
}
.tooltip td#bottomleft { 
background: url('../images/bubble-7.png') top left no-repeat; 
z-index: 9070; 
height: 15px; 
width: 19px; 
}
.tooltip td.bottom { 
background: url('../images/bubble-8.png') top left repeat-x; 
z-index: 9070; 
text-align: 
center; 
height: 15px; 
}
.tooltip td#bottomright { 
background: url('../images/bubble-9.png') top left no-repeat; 
z-index:  9070; 
height: 15px; 
width: 19px; 
}

HTML Code

In order for the tooltip to work the table or div code for the tooltip will go in between the <img> tag and the closing </a> tag. The actual tooltip code can be either a table or a div tag, but keep in mind that all of the CSS3 effects that can be used to make the drop shadows, rounded borders, gradients and multiple background images will not be visible in IE6-8 and other older browsers, so I opted for tables.


<a class="livechat-button" href="#"  id="chat" onclick="return false;">
<img id="tipbutton" src="#" alt="" />
Insert tooltip code here
</a>

Here is a sample of the tooltip code I used, basically it's a table design with the text in the center of a 9 cell table, the outer tables are used to hold the border images for the tooltip.


<table class="tooltip" style="width: 270px;">
<tbody>
<tr>
<td id="topleft" class="corner"></td>
<td class="top"><img src="#" /></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td class="cbg"><p><strong>Phone:</strong> 505-899-2428<br />
<strong>Fax:</strong> 505-508-5370<br />
<strong>Toll Free Order Line:</strong> 1-800-761-2005<br />
<br />
<strong>Customer Service Hours:</strong><br />
Monday-Friday, 7:00AM-7:00PM Mtn Time<br />
Saturday, 7:00AM-12:00PM Mtn Time </p></td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody>
</table>

Here is a sample of the entire code for the tooltip, since each of the tooltips and all of the icons are sitting inside of several containers. The outer container "cont1" is positioned so that all of the icons will be lined up properly, "bubbleInfo" is the container that defines the area that the modal window appears in, I wanted to be sure that the tooltip would stay in a certain area, orginially I had programmed a <DIV> container based tooltip, so the bubbleInfo container was required so that the tooltip container would stay in a confined area.

The last container "bubbleTitle" holds all of the code, once the code is completed I put the trigger script and the HTML into a Magento CMS Block.


<div class="cont1">
<div class="bubbleInfo first">
<div id="bubbleTitle">
<a class="livechat-button" href="#"  id="chat" onclick="return false;">
<img id="tipbutton" src="#" alt="" />
<table class="tooltip" style="width: 270px;">
<tbody>
<tr>
<td id="topleft" class="corner"></td>
<td class="top"><img src="#" /></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td class="cbg"><p><strong>Phone:</strong> 505-899-2428<br />
<strong>Fax:</strong> 505-508-5370<br />
<strong>Toll Free Order Line:</strong> 1-800-761-2005<br />
<br />
<strong>Customer Service Hours:</strong><br />
Monday-Friday, 7:00AM-7:00PM Mtn Time<br />
Saturday, 7:00AM-12:00PM Mtn Time </p></td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody>
</table>
</a> 
</div>
</div>
</div>

Here is a sample of a DIV based tooltip that I coded but did not use,

<div class="cont2">
<div class="bubbleInfo second">
<div id="bubbleTitle"><img class="trigger" src="/blog/{{skin url=images/icon-order-toll-free.gif}}" alt="" id="download" /></div>
<div id="dpop" class="codatip">
<div class="arrow"> <img src="/blog/{{skin url=images/bubble-tail2.png}}" /> </div>
<div class="box">
<p><strong>Phone:</strong> 505-899-2428<br />
<strong>Fax:</strong> 505-508-5370<br />
<strong>Toll Free Order Line:</strong> 1-800-761-2005<br />
<br />
<strong>Customer Service Hours:</strong><br />
Monday-Friday, 7:00AM-7:00PM Mtn Time<br />
Saturday, 7:00AM-12:00PM Mtn Time</p>
</div>
</div>
</div>
</div>

This is the CSS that I wrote to go along with the HTML above, you milage will vary since did not impliment any of this into the design.

.bubbleInfo {
	position: relative;
	top: 0px;
	left: 0px;
	width: 500px;
	z-index: 9900;
}
.trigger {
	position: relative;
}
/* Bubble pop-up */

.codatip {
	position: absolute;
	display: none;
	z-index: 9500;
 }
.codatip .box {
	position: relative;
	float: left;
	clear: left;
	display: inline;
	background-color: #ffffff;
	border-collapse: collapse;
	border: 1px solid rgb(160,199,255);
	border-radius: 10px;
	padding: 5px;
	box-shadow: 2px 2px 2px rgba(133,133,133,0.5);
	z-index: 9500;
}
.codatip .box p {
	font-size: 12px;
}
.codatip .arrow {
	z-index: 9900;
	position: relative;
	float: left;
	clear: left;
	display: inline;
}
.codatip .arrow img{
	z-index: 9900;
	position: relative;
	top: -3px;
	left: 50px;
}