jQWidgets Forums

jQuery UI Widgets Forums Grid Tool Tip for Column

This topic contains 5 replies, has 3 voices, and was last updated by  Christophe Opoix 12 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Tool Tip for Column #10039

    SRK
    Participant

    Hi,

    There was a property to set Tool tip for Grid Row, similar way could we able to set tool tip for Grid column?.

    Regards,
    /SRK

    Tool Tip for Column #10051

    Dimitar
    Participant

    Hello SRK,

    In jqxGrid, tooltips are available to cells after the enabletooltips property is set to true. If by columns you mean column headers, tooltips are not shown there by default, so you need to set the renderer column property. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This example shows how to create a Grid from Tab-delimited text
    also known as tab-separated values (TSV).</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var url = '../sampledata/homeprices.txt';
    // prepare the data
    var source =
    {
    datatype: "tab",
    datafields: [
    { name: 'Year', type: 'int' },
    { name: 'HPI', type: 'float' },
    { name: 'BuildCost', type: 'float' },
    { name: 'Population', type: 'float' },
    { name: 'Rate', type: 'float' }
    ],
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var headerTooltipRenderer = function (columnHeaderElement) {
    return "<div style='margin-left: 10px; margin-top: 5px;' title='" + columnHeaderElement + "'>" + columnHeaderElement + "</div>";
    };
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    columnsresize: true,
    theme: theme,
    enabletooltips: true,
    columns: [
    { text: 'Year', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150, renderer: headerTooltipRenderer },
    { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer },
    { text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'f2', width: 180, renderer: headerTooltipRenderer },
    { text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer },
    { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100, renderer: headerTooltipRenderer }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Tool Tip for Column #12569

    SRK
    Participant

    Hi Dimitar,

    Thanks for the reply, for the above method tool tip would be displaying for the Text mentioned in the Grid Column like

    columns: [
    { text: ‘Year’, …..}

    Then Grid Column is diplaying Tool tip as “Year”

    But requirement is default display text should be short and on mouse over it should display abbrevation of the text

    Ex : Grid Column Name : “US”
    And on Mouse over of the “US” column it should display “United States”

    is that possible in Jqxgrid?

    Regards,
    /SRK

    Tool Tip for Column #13692

    Christophe Opoix
    Participant

    Hi,

    You can pass parameters to functions that return functions, like this :

    var headerTooltipRenderer = function(text) {
    return function (columnHeaderElement) {
    return "<div style='margin-left: 10px;margin-top: 5px' title='" + text + "'>" + columnHeaderElement + "</div>";
    };
    };

    Then define your columns like this :

    columns: [
    { text: 'Y', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150, renderer: headerTooltipRenderer('The Year') },
    { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer('The HPI') },
    { text: 'Cost', datafield: 'BuildCost', cellsformat: 'f2', width: 180, renderer: headerTooltipRenderer('The Build Cost') },
    { text: 'Pop', datafield: 'Population', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer('The Population') },
    { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100, renderer: headerTooltipRenderer('The Rate') }
    ]
    Tool Tip for Column #13750

    Christophe Opoix
    Participant

    There is a small problem though.
    The tooltip is only displayed on the first part of the column header, the iconscontainer div blocks the tooltip display.

    Is there a way to redefine the iconscontainer title or apply the title on the parent div ?

    Tool Tip for Column #13801

    Christophe Opoix
    Participant

    Ok. Managed to get something working this way :

    var headerTooltipRenderer = function(text) {
    return function (columnHeaderElement) {
    return "<div class='renderedColumn' style='margin-left: 5px; margin-top: 5px;' title='" + text + "'>" + columnHeaderElement + "</div>";
    }
    };

    And added this code to the ready function :

    $("div .renderedColumn").each(function() { this.parentElement.title = this.title;});

    There should be something cleaner though.

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

You must be logged in to reply to this topic.