Oh...I just stumbled across hint.css which is purely css tooltip. No js needed to implement. Works like a charm.
from displayTableHtml section added the class="hint--bottom" to the td tag.
- Code: Select all
$html .= '<td '.$colHeaderInfo.' class="hint--bottom"><a href="javascript: void(0);" onclick="'.$this->instanceName.'.toAjaxTableEditor(\'order_by_changed\', new Array(\''.$col.'\',\''.$oppAscOrDesc.'\'),{updateHistory: true});">'.$info['display_text'].'</a> '.$arrow.'</td>';
}
else
{
$html .= '<td '.$colHeaderInfo.' class="hint--bottom"><a href="javascript: void(0);" onclick="'.$this->instanceName.'.toAjaxTableEditor(\'order_by_changed\', new Array(\''.$col.'\',\'asc\'),{updateHistory: true});"">'.$info['display_text'].'</a></td>';
}
then
for the col_header_info I replaced 'title' tag with 'data-hint'.
Example:
- Code: Select all
'col_header_info' => 'data-hint="Select from drop down."'
I also had to modify the first section of css to postion:relative and also commented out display: inline-block. Works like a charm. The next version on MATE should include this as it implements nice simple tooltip without js and modifying much code logic.