Hover and Focus

Things to check for:

You can dismiss the tooltip, popover, or modal without loosing focus or moving the mouse.
You can hover over the tooltip, popover, or modal without it closing.

Tooltip example set 1

NOTE: You can dismiss the tooltip by hitting the "escape" key.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in magna ac nunc faucibus lacinia. Cras id volutpat nisi. Ut molestie lectus at eros tempor venenatis. in nunc sapien. Morbi laoreet dictum leo ut tempor. Morbi eu mi sed libero interdum ultricies. Aliquam in varius urna, nec auctor turpis. Nullam et luctus lectus.

Tooltip example set 2

Tooltip example set 2 is only available on hover.

The user cannot activate the tooltip by using the tab key (on focus).

The tooltip itself closes when a user attempts to move the mouse on top of the tooltip.

The tooltip cannot be closed without moving the mouse (by hitting the escape key for example).

Tooltip example set 3

Tooltip example set 3 is only available on focus (the tooltip must be tabbed to).

The tooltip cannot be closed without moving focus (hitting the tab key) or the mouse (by hitting the escape key for example).

Code

Example of how to code accessible tooltips using Bootstrap: