How to add tooltips on disabled elements in CxJs?

June 7, 2023

As far as I know, disabled elements don’t have tooltips by default. Is there a way to go around this somehow and add tooltips to them even in this scenario?

P.S. I am working with MenuItem. Do they have some rules that apply to them regarding these tooltips?

I tried something like this:

<MenuItem
  text="someText"
  onClick="someAction"
  visible-expr="{somethingToEvaluate}"
  disabled-bind="conditionForDisabling"
  tooltip={{
    text: "This is the text for tooltip.",
    visible: expr("{conditionForDisabling}");
}}

but it wasn’t showing up.

>Solution :

Unfortunately, it is not possible to have a tooltip on a disabled element at the moment.
You can get around this by wrapping the element with a span and placing the tooltip on it. You can see the example here.

You can see the example here: Fiddle