Tooltip properies

Posted by: ylipkin on 17 May 2019, 8:19 am EST

    • Post Options:
    • Link

    Posted 17 May 2019, 8:19 am EST

    Hi

    I’m using flexgrid in mvc web project with pure javascript.

    Couldn’t find how to use showDelay and Title properties for tooltip.

    Code working correctly.

    Thank you

    //tooltip event for cell
        gridRole.hostElement.addEventListener('mousemove', function (e) {
            let ht = gridRole.hitTest(e),
                rng = null;
            toolTip = new wijmo.Tooltip();
            if (!ht.range.equals(rng)) {
                if (ht.cellType == wijmo.grid.CellType.Cell) {
                    rng = ht.range;
                    if (rng.col === 0) {
                        let item = gridRole.rows[ht.row].dataItem;
                        let data = gridRole.getCellData(rng.row, rng.col, true),
                            //tipContent = '<b>Column ${rng.col} </b>: ${data} ',
                            tipContent = '<b>' + item.ROLE_NAME + '</b> <br />' + item.NOTE,
                            cellElement = document.elementFromPoint(e.clientX, e.clientY),
                            cellBounds = wijmo.Rect.fromBoundingRect(cellElement.getBoundingClientRect());
                        toolTip.show(gridRole.hostElement, tipContent, cellBounds);
                        //toolTip.showDelay = 1000;
                        //toolTip.Title = item.ROLE_NAME;
                   }
                }
            }
        });
        gridRole.hostElement.addEventListener('mouseout', function (e) {
            toolTip.hide();
        });
    
  • Posted 17 May 2019, 8:33 am EST

    Could you please, also provide example for pure javascript how to use ChartTooltip

  • Posted 19 May 2019, 5:50 pm EST

    Hi,

    showDelay/hideDelay properties could be used only in the Automatic mode i.e when the tooltip is added using the setTooltip() method.

    When displaying the tooltip in manual mode i.e. using the show() method, we need to handle the show/hide delay ourselves.

    Please refer to the following sample which demonstrates how we could add tooltip to flexgrid cells in automatic mode and use the showDelay/hideDelay properties:

    https://jsfiddle.net/wpqr2be0/11/

    Also, Tooltip doesn’t support Title property, so if you need to display title then you need to set it as the tooltip content and style it accordingly. Please refer to the following API doc for more info:

    https://www.grapecity.com/wijmo/api/classes/wijmo.tooltip.html

    ~sharad

  • Posted 20 May 2019, 7:16 am EST

    Thank you, Sharad.

    Provided sample cover everything.

  • Posted 10 August 2021, 11:44 pm EST

    Hi sharad,

    in your reply :-

    When displaying the tooltip in manual mode i.e. using the show() method, we need to handle the show/hide delay ourselves

    I’m displaying tooltip using show method:-

     const tt = new wjcCore.Tooltip();
        grid.hostElement.addEventListener('mousemove', (e: MouseEvent) => {
          const hti = grid.hitTest(e);
          if (hti.panel === grid.cells) {
            const elem = hti.panel.getCellElement(hti.row, hti.col);
            const txt = this.getElemenetText(elem);
            tt.showDelay = 999999;
            // tt.hideDelay = 999999;
            const rc = new wjcCore.Rect(e.pageX, e.pageY - 10, 10, 10);
            if (txt.length > 0) {
              tt.show(elem, txt, rc);
            }
          }
        });
    
        grid.hostElement.addEventListener('mouseout', e => {
          tt.dispose();
        });
    

    In the above code how can i add a delay on 1sec before showing the tooltip ?

    regards

  • Posted 11 August 2021, 6:00 pm EST

    Hi Shiva,

    The showDelay and hideDelay properties would not affect the delays of the tooltip in the manual approach. So, if you wish to create a delay in showing and hiding tooltip you may use the setTimeOut method to create a manual delay for it. You may refer to the sample below demonstrating the same:

    https://stackblitz.com/edit/angular-vlqsel

    Regards,

    Ashwin

  • Posted 11 August 2021, 7:34 pm EST

    Hi Ashwin,

    Above method behaves different on my sample.

    https://stackblitz.com/edit/angular-q1adt3?file=src/app/app.component.ts

    Hover on any cell and observe the tooltip.

    Please provide solution for this.

    Regards

  • Posted 12 August 2021, 6:05 pm EST

    Hi,

    As per our observation, the behaviour you are observing is the tooltip content getting updated when hovering over a new cell element, if that’s the case you can change it by setting txt variable .i.e. containing tooltip content to empty on mousemove event. Please refer to the code snippet below:

    grid.hostElement.addEventListener('mousemove', (e: MouseEvent) => {
          tt.dispose();
          this.rc = new wjcCore.Rect(e.pageX, e.pageY - 10, 10, 10);
          txt = '';
        });
    

    You may also refer to the updated sample:

    https://stackblitz.com/edit/angular-svagy7

    If you are facing any other behavior than this please do let us know.

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels