jQuery UI Widgets Forums Grid Tooltip not shown on narrow column header

This topic contains 2 replies, has 2 voices, and was last updated by  frida 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Tooltip not shown on narrow column header #103924

    frida
    Participant

    Hello,

    My problem is the following:
    I would like to display tooltip on each column header of my grid.
    If the column header is too narrow (e.g. 50 px) the tooltip is not displayed. If I resize the column header wider, it is working.
    Is there any possibility to display tooltip on narrow columns, too?

    Thanks in advance,
    Frida

    Tooltip not shown on narrow column header #103940

    Peter Stoev
    Keymaster

    Hi frida,

    How do you attach tooltips to column headers in our Data Grid?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com

    Tooltip not shown on narrow column header #104024

    frida
    Participant

    Hello,

    I send the code.
    On “Units In Stock” column the tooltip is not displayed.

    Thank you,
    Frida

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    
        </title>
    
        <meta name="description" content="JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping" />
    
        <link rel="stylesheet" href="jqx.base.css" type="text/css" />
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    
        <script type="text/javascript" src="jquery-1.12.4.js"></script>
    
        <script type="text/javascript" src="jqxcore.js"></script>
    
        <script type="text/javascript" src="jqxdata.js"></script> 
    
        <script type="text/javascript" src="jqxbuttons.js"></script>
    
        <script type="text/javascript" src="jqxscrollbar.js"></script>
    
        <script type="text/javascript" src="jqxmenu.js"></script>
    
        <script type="text/javascript" src="jqxcheckbox.js"></script>
    
        <script type="text/javascript" src="jqxlistbox.js"></script>
    
        <script type="text/javascript" src="jqxdropdownlist.js"></script>
    
        <script type="text/javascript" src="jqxgrid.js"></script>
    
        <script type="text/javascript" src="jqxgrid.sort.js"></script> 
    
        <script type="text/javascript" src="jqxgrid.pager.js"></script> 
    
        <script type="text/javascript" src="jqxgrid.selection.js"></script> 
    
        <script type="text/javascript" src="jqxgrid.edit.js"></script> 
    	<script type="text/javascript" src="demos.js"></script>
        <script type="text/javascript" src="jqxtooltip.js"></script>
    
        <script type="text/javascript">
    
            $(document).ready(function () {
    
                var url = "products.xml";
    
                // prepare the data
    
                var source =
    
                {
    
                    datatype: "xml",
    
                    datafields: [
    
                        { name: 'ProductName', type: 'string' },
    
                        { name: 'QuantityPerUnit', type: 'int' },
    
                        { name: 'UnitPrice', type: 'float' },
    
                        { name: 'UnitsInStock', type: 'float' },
    
                        { name: 'Discontinued', type: 'bool' }
    
                    ],
    
                    root: "Products",
    
                    record: "Product",
    
                    id: 'ProductID',
    
                    url: url
    
                };
    
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
    
                    if (value < 20) {
    
                        return '<span style="margin: 4px; margin-top:8px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
    
                    }
    
                    else {
    
                        return '<span style="margin: 4px; margin-top:8px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
    
                    }
    
                };
    
                var tooltiprenderer = function (element) {
    
                    //$(element.parent()).jqxTooltip({ position: 'mouse', content: $(element).text() });
                    $(element).jqxTooltip({ position: 'mouse', content: $(element).text() });
                    return;
    
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
    
                    downloadComplete: function (data, status, xhr) { },
    
                    loadComplete: function (data) { },
    
                    loadError: function (xhr, status, error) { }
    
                });
    
                // initialize jqxGrid
    
                $("#grid").jqxGrid(
    
                {
    
                    width: "700px",
    
                    source: dataAdapter,                
    
                    pageable: true,
    
                    autoheight: true,
    
                    sortable: true,
    
                    altrows: true,
    
                    enabletooltips: true,
    
                    editable: true,
    
                    selectionmode: 'multiplecellsadvanced',
    
                    columns: [
    
                        { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', rendered: tooltiprenderer, width: 50 },
    
                        { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', rendered: tooltiprenderer, width: 200 },
    
                        { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', rendered: tooltiprenderer, width: 200 },
    
                      { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, rendered: tooltiprenderer, width: 30 },
    
                      { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', rendered: tooltiprenderer }
    
                    ],
    
                    columngroups: [
    
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
    
                    ]
    
                });
    
            });
    
        </script>
    
    </head>
    
    <body class='default'>
    
        <div id="grid">
    
        </div>
    
    </body>
    
    </html>
    
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.