Tooltip not getting displayed with disabled checkbox

[nreese]

The following does not display a tooltip

      <EuiToolTip
        position="left"
        content={`Map is at zoom level ${zoom}.
          This layer is only visible between zoom levels ${minZoom} to ${maxZoom}.`}
      >
        <EuiCheckbox
          id={layer.getId()}
          checked={layer.isVisible()}
          onChange={() => {}}
          disabled
        />
      </EuiToolTip>

cc @chandlerprall

[chandlerprall]

The tooltip isn't trigged as disabled inputs don't trigger mouse events. This can be fixed by adding pointer-events: none; to any children of a tooltip, but then the mouse cursor does not change to the disabled state when hovering over the checkbox. Thoughts @snide @cchaos ?

[snide]

I think it's probably more important to see the tooltip then maintain the cursor state. If that works I'm OK with it.

[cchaos]

pointer-events: none; to any children of a tooltip

only when disabled? Or always?

[chandlerprall]

@cchaos only when disabled

[cchaos]

My worry is the unintended side effects of not allowing any interaction with children of a tooltip. How will the tooltip know if the children are disabled? How will it know all children are disabled? Do you have to pass disabled to the tooltip itself?

[chandlerprall]

This is already done with top-level disabled children - https://github.com/elastic/eui/blob/master/src/components/tool_tip/_tool_tip.scss#L77-L84

The change is removing the direct-descendent selector.

[cchaos]

Ahhh ok, i see. Sure we can try it