How to add tooltips on disabled elements in CxJs?

Question

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.

Answer 1

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.

If the tooltip needs to be visible all the time, you don't need a visible condition, but if you want it to be visible only in a disabled state, you can add a visible prop to the tooltip.

 <span
      tooltip={{
        text: "Test",
        visible: bind("disableTextField")
      }}
    >
      <TextField text="test" disabled-bind="disableTextField" />
 </span>

You can see the full example here: Fiddle