How to create tooltips in asp:Repeater using Bootgrid
In my previous posts Use jQuery Bootgrid with asp.net Gridview and Use jQuery Bootgrid with asp.net Repeater I have already shown details about using jQuery-Bootgrid in asp.net Gridview and Repeater. I’ve also shown how to format datetime or numeric values, style columns, add links and some more. So here are some more things which you might want to add in your jQuery Bootgrid implementation. These tips are not related to asp.net anymore, so these are also helpful if you are on PHP, HTML or whatever.
How to add hidden columns
You might have columns which you do not want to show but you need them for some reasons, e.g. if you have a link to the website of the company you might not want to display it but have it automatically set for the companyname column so that a user could click the link. For such cases Bootgrid has an option ‘data-visible’ in the column settings . Set it to ‘false’ to hide the column.
<th data-column-id="description" data-visible="false">
Hidden Description
</th>
How to add tooltips
Maybe you want to have a more detailled description on a certain column if you move the mouse to it. This feature could be added using Bootgrid Formatters on our own. So in this example I show the company name in the table and a more detailled description on mouse hover.
formatters: {
"companyname": function (column, row) {
return "<span title=\"" + row.description.trim() + "\">" + row.companyname + "</span>";
},
},
How to add a default tooltip
If a text in a cell is not displayed completely you might expect that it will show up as soon as you move the mouse to it. With Bootgrid it doesn’t. So as an extension to the tooltip created above we now create a general formatter which could be used in all our columns. But take care: If you use Formatters and Converters on the same column you might get unexpected results as both features affect the output of the cell. To have a common tooltip formatter we could use “row[column.id]” to get the value of the current cell. The formatter ‘showalsoastooltip’ shows how to create such a tooltip.
formatters: {
"showalsoastooltip": function (column, row) {
return "<span title=\"" + row[column.id] + "\">" + row[column.id] + "</span>";
}
},