Magento

View the demo form

Read more about SmartFormer Gold

Solution is provided by wodnick

• SmartFormer Gold installed (trial or full)
• Tooltip image uploaded on your website

1. Open SmartFormer Gold in admin area

2. Open the form. Add tooltip image (to do it select image element on the left. The defaults image will be added. Click it and press “Select Image” in its src. Select your image).

3. Now in the box with image’s properties set a unique ID to the image (any you wish)

4. Select Tools → CSS Editor in SmartFormer Gold’s menu and add the following there:

.new_hint {
     border:1px solid #FFFFFF;
     background: #F0F0E6;
     width: 200px;
     position:absolute;
}

.new_hint div{
     background: #E999F9;
     width: 196px;
     padding: 2px; 
     margin: 0;
}

.new_hint span{
display: block;
margin: 2px;
padding: 0;
}

5. Select Tools → JavaScript Editor in SmartFormer Gold’s menu and add the following there:

 function showDivHint(obj) {
   var div = document.createElement('div');
   div.id = obj.id+"new_hint"
   div.innerHTML = '<div>Tooltip</div><span>'+obj.name+'</span>';
   obj.parentNode.appendChild(div);
   div.className = "new_hint";
   div.style.left = parseInt(obj.style.left) + 10 + 'px';
   div.style.top = parseInt(obj.style.top) - 5 - div.offsetHeight + 'px';     
 }

 function hideDivHint(obj) {
   var divbase = obj.id;
   var div = document.getElementById(divbase+'new_hint');
   if (div) div.parentNode.removeChild(div);
 }

6. Click the tooltip image again to view its properties. Do the following:

~~ Clear alt attribute

~~ Set cursor = pointer (in Styles)

~~ In name attribute add the text that the tooltip should show (HTML allowed)

~~ In Events of the image add the code to the onmouseover event

 showDivHint(this)

~~ In Events add the code to the onmouseout event:

 hideDivHint(this)