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?
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:
Get rid of the container header:
Set the container border at 0% opacity:
Set padding type = none
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:
Both inside their own containers:
