It's easy to add comments and tooltips in system configuration options like this:

        <comment>this is the comment</comment>
        <tooltip>this is the tooltip</tooltip>

but these do not work for widget options.

I am able to display a comment in the widget options by using the <description> tag like:

<description>this is the description</description>

but, I have not found an easy way to add tooltips. Does such a thing exist?


I actually ended up simply using CSS to create the tooltips. Since widgets cannot use <comment> tags, I used <description> tags and CDATA to include the html with class like the following.

<description><![CDATA[Some informative text here. (<a module-title="This is the tooltip which will popup." class="module-tooltip">info</a>)]]></description>

The CSS looks like this:

.module-tooltip {
    display: inline;
    position: relative;

.module-tooltip:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(module-title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;

.module-tooltip:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;

That's not supported out of the box.
Take a look at the method Mage_Widget_Block_Adminhtml_Widget_Options::_addField(). This is called (eventually) when building the widget options form.
The parameters for the field are build like this:

    $data = array(
        'name'      => $form->addSuffixToName($fieldName, 'parameters'),
        'label'     => $this->_translationHelper->__($parameter->getLabel()),
        'required'  => $parameter->getRequired(),
        'class'     => 'widget-option',
        'note'      => $this->_translationHelper->__($parameter->getDescription()),

and later $data['value'] is added.
You can try to extend this and add a new element in the array called after_element_html where you can basically put anything, and work some magic through css and js to make that "anything" behave as a tooltip.

| improve this answer | |
  • For what it's worth, I ended up just using CSS for the tooltips :) – Tim Hallman Jun 2 '15 at 1:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.