Tooltips on disabled fields

Tooltips on disabled fields

Posted by: phill_dutton on 5 November 2019, 7:08 am EST

• 

  phill_dutton

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 November 2019, 7:08 am EST

  Is there any way of getting tooltips to display on disabled fields?

  Tooltips seem to work ok in our application until fields are disabled (i.e. have a class of wj-state-disabled). We intended to use them to indicate why a particular field is disabled.

  You can test this for yourself on the following page:
  
  https://www.grapecity.com/wijmo/demos/Core/Tooltips/purejs

  Adding a class of ‘wj-state-disabled’ to the button prevents the tooltip from being displayed.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2019, 11:56 pm EST

  Hi Phill,

  The reason that the Tooltip is not shown on the button is that adding the ‘wj-state-disabled’ CSS class also disables any pointer-events on the element. You could update the ‘wj-state-disabled’ class by setting the pointer-events to auto, to show the tooltip but I would not recommend you to do it since the most important part of the disabling an element is to disable its mouse events.

  But what you can do is create a container for the disabled element or the control and set a tooltip on this container. Please refer to the sample link below:

  https://stackblitz.com/edit/js-cf4ozv

  Regards,
  
  Ashwin