Is there a way to have the tooltip directly on the toggle?

Hey there!

I have a toggle that is only active in certain cases. I have the tooltip giving instructions on those cases. However, the tooltip only shows up when you hover on the WORDS, not on the switch itself.

It's nice if you hover on the words:

If you hover on the toggle, you just get the "IT WON'T WORK!" icon:

Of course users tend to hover only on the switch, so they don't see the words. They call us and ask, "Why isn't this working?" To which we answer, "Hover on the words next to the switch..."

Is there a way to make the words show up ALSO when you hover on the switch itself?



Great question @mathfour!

It seems there isn't a native way to do this (yet), but as a workaround, you can put the toggle in a container and then put the on-hover words as the container tooltip:


This makes the popup come up on the toggle AND the words.

Some things to note:

  1. Get rid of the container header:
  2. Set the container border at 0% opacity:
  3. Set padding type = none
  4. If you have other toggles, you'll need to put each of them inside containers if you want them to line up and look nice.
    One inside a container, one outside: image
    Both inside their own containers: image



Thank you for the solution, @mathfour! I made an internal feature request for this as well :blush: