jQuery UI Widgets Forums Grid column header's tooltip

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 9 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • column header's tooltip #63136



    How to set tooltip for column headers other than the header text.
    For ex, ‘ID’ as Column Header text and ‘Description’ as tooltip for that Column Header.


    column header's tooltip #63139


    Hello Viji,

    Please, find the following example which shows how to set tooltip content on each column in jqxGrid. You can achieve it with ‘rendered’ callback function that is called when the column is rendered.

    <!DOCTYPE html>
    <html lang="en">
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/orders.xml";
                // prepare the data
                var source =
                    datatype: "xml",
                    datafields: [
                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:OrderID',
                    url: url,
                    sortcolumn: 'ShipName',
                    sortdirection: 'asc'
                var dataAdapter = new $.jqx.dataAdapter(source);
                // create jqxgrid.
                    width: 850,
                    height: 450,
                    source: dataAdapter,
                    sortable: true,
                    altrows: true,
                    columns: [
                          text: 'Ship Name', datafield: 'ShipName', width: 250,
                          rendered: function (element) {
                              $(element).jqxTooltip({ position: 'mouse', content: "Ship Name tooltip!" });
                          text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd',
                          rendered: function (element) {
                              $(element).jqxTooltip({ position: 'mouse', content: "Shipped Date tooltip!" });
                      { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                      { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                      { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                      { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
    <body class='default'>
        <div id="jqxgrid">

    Best Regards,

    jQWidgets team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.