jQWidgets Forums

jQuery UI Widgets Forums Grid jqxTooltip with image on cell hover.

This topic contains 14 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 4 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • jqxTooltip with image on cell hover. #10682

    grmbl
    Member

    Hello, can anybody help me on my way on how to accomplish this?

    jqxTooltip with image on cell hover. #10684

    Peter Stoev
    Keymaster

    Hi grmbl,

    jqxTooltip cannot be used as a tooltip in jqxGrid. It is not supported by jqxGrid.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTooltip with image on cell hover. #10685

    grmbl
    Member

    Any suggestions on how to do this without jqxTooltip?

    Thanks in advance!

    jqxTooltip with image on cell hover. #10686

    Peter Stoev
    Keymaster

    Hi grmbl,

    You can use the built-in tooltips by setting: enabletooltips: true

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTooltip with image on cell hover. #10687

    grmbl
    Member

    I have a grid with rows being selected thus not seeing the tooltips after setting enabletooltips: true…
    Because I need an image in the tooltip I will have to take a look at other tooltip plugins I think.
    In the cell I have the product name. On hover I would like to show a tooltip with the image retrieved by using the name (= value).

    jqxTooltip with image on cell hover. #10688

    Peter Stoev
    Keymaster

    Hi grmbl,

    By setting enabletooltips to true, Grid will display the cell’s content as a tooltip, in case you don’t use custom cells rendering. Otherwise you need to manually set the ‘title’ attribute of the returned HTML in the cellsrenderer callback function. Tooltips can be observed in the defaultfunctionality sample of jqxGrid. Hover any cell and the tooltip will be displayed.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTooltip with image on cell hover. #10690

    grmbl
    Member

    Thanks Peter,

    How is the tooltip built? Can it contain images or only basic text values?

    jqxTooltip with image on cell hover. #10693

    Peter Stoev
    Keymaster

    Hi grmbl,

    The tooltip in the Grid is the “title” attribute of the HTML elements, i.e when the enabletooltips property is set to true, the “title” attribute of each cell is set to the cell’s value. The built-in tooltip displays only text values.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTooltip with image on cell hover. #10699

    grmbl
    Member

    Peter,

    Thanks for the information. I will take the above in account for text tooltips.

    Now that I come to think of it, do you think it’s possible to do the following?

    (grid bound to xml)
    a cell has the item name and would be cool if i could show the item description as tooltip on that field.

    For the image tooltip I will try and implement this with another script? Is it possible to use another script to show
    tooltips inside jqwidgets controls?

    Thanks for your help, appreciate it.

    jqxTooltip with image on cell hover. #10703

    Peter Stoev
    Keymaster

    Hi grmbl,

    Most of the tooltips work by selection of HTML element by class or by ID. As the Grid cells are dynamically updated, I don’t think this will do the job. We will consider adding an option to use jqxTooltip plug-in inside jqxGrid in the future versions. With the built-in tooltips at present, you can change the tooltip’s display by using custom cells rendering: jquery-grid-cellsrendering.htm. In the returned HTML, set the title attribute to one of your choice.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTooltip with image on cell hover. #10704

    grmbl
    Member

    OK Peter,

    Thanks for the info and looking forward to the implementation of jqxTooltip in jqxGrid!

    Greetings,

    grmbl

    jqxTooltip with image on cell hover. #10706

    grmbl
    Member

    One last thing, how can I detect row selection changed and get rowdata of newly selected row?

    Greetings,

    grmbl

    jqxTooltip with image on cell hover. #10721

    grmbl
    Member

    Nevermind, I got it. 🙂

    AND I got it (partially) working using a buttoncell and jqxWindow!


    // imagecell value
    var imagecellrenderer = function (row, column, value) {
    return value;
    }

    // imagecell click
    var imagecellclick = function(row) {
    var offset = $(“#jqxgrid”).offset();
    $(“#popupWindow”).jqxWindow({ width: 300, height: 200, resizable: false, position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
    $(“#itemname”).val(dataRecord.ITPRDC);
    $(“#itemdesc”).val(dataRecord.ITDESC);
    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘show’);
    }

    columns: [

    // { text: ‘Item’, dataField: ‘ITPRDC’, renderer: columnrenderer, width: ‘6%’ },
    { text: ‘Item’, datafield: ‘ITPRDC’, columntype: ‘button’, cellsrenderer: imagecellrenderer, width: ‘6%’, buttonclick: imagecellclick },

    ],

    Item

    Item:

    Description:

    BUT can I only use html elements of type “input” to bind the datarow data to?
    How would you suggest using the value for an img?

    Also, is it possible to set the offset of the popup to the buttoncell that was clicked?

    Thanks,

    grmbl ^^

    jqxTooltip with image on cell hover. #10731

    grmbl
    Member

    I have 2 other questions:

    1. If I use jqxWindow but it only needs to show when clicked on the buttons, why
    is the html code being shown? How can I go around this?

    2. Is there a way to default show ALL rows?

    Thanks

    jqxTooltip with image on cell hover. #10752

    Peter Stoev
    Keymaster

    Hi grmbl,

    – You can take a look at this sample:popupediting.htm. It shows how to use jqxWindow along with jqxGrid.

    – The Grid’s autoheight property specifies whether the Grid will create UI element for all rows at once and will display them on a single page. Its height will be equal to the sum of the all rows height.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.