Need options for tooltips to display on a timer

[CynZhang]

Summary

We'd like the tooltip component to have options to set a delay on hover to avoid unintentional activation.

Justification

The native tooltips that we are using have a short delay, but carbon's tooltip is missing this feature. The tooltip always pops up right away, it makes the user experience slightly different when replacing them. The delay would help to avoid accidental activations, and make users feel more in control.

Desired UX and success metrics

The expected behavior of the icon tooltip would be when user mouse over the icon or the target area, if the cursor remains stopped for no less than 0.5 seconds (custom defined), then show the tooltip content.

[emyarod]

you should be able to adjust the animation properties with CSS, so something like this for example:

.bx--tooltip__trigger::before,
.bx--tooltip__trigger .bx--assistive-text {
  animation-delay: 500ms;
}

[CynZhang]

@scottdickerson maybe give this a try?

[scottdickerson]

@emyarod I'm not having any luck with that, not sure that an actual css animation is getting triggered to show the tooltip. Seems like maybe it's just getting transformed

[emyarod]

@scottdickerson just to clarify are you using the icon/definition tooltips or the interactive tooltip? I assume it is the former because of the reference to hover interactions in the issue description

[scottdickerson]

Yes it’s the hasIconOnly ghost button tooltip

[emyarod]

it turns out in my testing I was actually adjusting the *-duration properties instead of *-delay, not sure if that's a viable workaround in the meantime. at the moment it's not clear why the *-delay properties don't seem to be working

.bx--tooltip__trigger::before {
  transition-duration: 2s;
}
.bx--tooltip__trigger .bx--assistive-text {
  animation-duration: 2s;
}

[sstrubberg]

Closing in favor of @emyarod's recommendation. Let me know if you'd like to re-open

[brandones]

@sstrubberg This appears to no longer work. I'm using Carbon React. The code

            <Button size="md" kind="ghost" onClick={handleDelete} iconDescription={t('deleteIdentifierTooltip', 'Delete')} disabled={disabled} hasIconOnly>
              <TrashCan size={16} />
            </Button>

Does not create any element in the DOM with class bx--tooltip__trigger. Looking at the DOM changes when I hover the button, it would appear to be controlled with Javascript.

[tay1orjones]

In v11 Tooltip has the enterDelayMs and leaveDelayMs props for this purpose

[brandones]

@tay1orjones Yes, Tooltip does. However, icon buttons also have tooltips, and they do not have this prop.