Grids Renderer Tooltip Example
In this example we want to configure the custom rendering of the Title column in a grid of the Service module to display the description of the ticket, when the mouse passes over.
The code you have to insert PHP codethat return a string containing the HTML code that has to be rendered in the grid cell.
We will then use PHP to access the operation fields and to properly build the string containing the HTML code.
To enter the custom renderer configuration code click on the </> icon in the Renderer field to display the scripting area.
And insert the following code:
//print the ticket title
$html = '<div title="_" class="deepTooltip" data-tooltip-content="#deep_tooltip_content_'.$row->getId().'" style="min-width:300px;font-weight:bold;">' . $value . '</div>';
//define tooltip content ticket Description
$html .= '<div style="display:none;"><div id="deep_tooltip_content_'.$row->getId().'">'.$row->getDescription().'</div></div>';
//initialise tooltip js component
$initToolTip = Deep::registry('deep_grid_title_tooltip');
if(!$initToolTip){
Deep::register('deep_grid_title_tooltip', true);
$html .= '<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".deepTooltip").tooltipster({
theme: "tooltipster-shadow",
interactive: true,
side: "right"
});
jQuery(".deepTooltip").attr("name", "");
});
</script>';
}
return $html;
Now, passing with the mouse pointer over the Title column, a tooltip containing the description of the Operation in that row will appear.
