Special features of forms (SmartFormer Gold). Part 1

Last modified by IToris on Thu, October 14, 2010 13:05
Source|Old Revisions  |  Back To Group

How to create Effects

Effect 1. Tooltips appear of mouse hover

Solution is provided by wodnick

What you will need:

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

Create the effect

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)



 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs