I have a jqx grid, i have already enabled the tooltips for all the columns in the grid. one of the column in the grid will have images . how can i show text value in the tooltips
Please find the sample code
columns: [
{
text: '',
dataField: 'valid',
width: '4%',
hidden: false,
editable: false,
enabletooltips:true,
filterable: false,
cellsrenderer: statusCellRenderer,
rendered: tooltipRenderer
},
functions of the column :
var statusCellRenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowData) {
console.log("row---------------->",this.uielement);
//console.log("value---------->",value);
//value = false;
//console.log("element------------>",element);
if (rowData.errorMessage != ''){
this.uielement.jqxTooltip({disabled:false,position: 'mouse', content: 'testing' });
return '<div class="errorIcon">⚠</div>';
}
else
return '';
}
var tooltipRenderer = function(element) {
$(element).jqxTooltip({disabled:false,position: 'mouse', content: 'testing' });
element.textContent = 'Test';
console.log("element------>",element);
}
$('#grid').jqxGrid({
cellhover: function (element, pageX, pageY, record) {
var cellValue = $(element.innerHTML).find('span').html(); // you can remove if any element not required in tooltip here
var tooltipContent = "<div>" + cellValue + "</div>";
if (cellValue && cellValue.trim().length > 0) {
$(element).jqxTooltip({ content: tooltipContent });
$(element).jqxTooltip('open', pageX + 15, pageY + 15);
} else {
$('#grid').jqxTooltip('close');
}
}
});
As you said this snippet will show tooltip for your entire grid cell. I hope this will help you. If you have any queries let me know.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.