Preview: Tooltip 1.0-alpha

These are a preview of components with individual items triggered. Because this is automatically generated, some of these components may look similiar to each other. This is also used by the Axe Monitor process to validate accessibility.

Preview: Base level for default

Hover over me This is a simple tooltip example.

Preview: default and theme =

Hover over me This is a simple tooltip example.

Preview: default and theme = blue

Hover over me This is a simple tooltip example.

Preview: default and arrow =

Hover over me This is a simple tooltip example.

Preview: default and arrow = top-left

Hover over me This is a simple tooltip example.

Preview: default and arrow = top-center

Hover over me This is a simple tooltip example.

Preview: default and arrow = top-right

Hover over me This is a simple tooltip example.

Preview: default and arrow = left

Hover over me This is a simple tooltip example.

Preview: default and arrow = right

Hover over me This is a simple tooltip example.

Preview: default and arrow = bottom-left

Hover over me This is a simple tooltip example.

Preview: default and arrow = bottom-center

Hover over me This is a simple tooltip example.

Preview: default and arrow = bottom-right

Hover over me This is a simple tooltip example.

Preview: Base level for Bold Text in tooltip

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and theme =

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and theme = blue

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow =

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = top-left

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = top-center

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = top-right

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = left

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = right

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = bottom-left

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = bottom-center

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Bold Text in tooltip and arrow = bottom-right

Hover over me Some content in bold.
This is a simple tooltip example.

Preview: Base level for Button Trigger

This is additional information that appears when you hover over the button.

Preview: Button Trigger and theme =

This is additional information that appears when you hover over the button.

Preview: Button Trigger and theme = blue

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow =

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = top-left

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = top-center

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = top-right

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = left

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = right

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = bottom-left

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = bottom-center

This is additional information that appears when you hover over the button.

Preview: Button Trigger and arrow = bottom-right

This is additional information that appears when you hover over the button.

Details

Ilw-tooltip is a popup that provides additional information about a user interface element, such as a button or link, when the mouse hovers over it.

Full Version: 1.0.0-alpha

Type: web component

Date Created: 06/18/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-tooltip/

Javascript file: https://dev.toolkit.illinois.edu/ilw-tooltip/1.0.0-alpha/ilw-tooltip.js

CSS file: https://dev.toolkit.illinois.edu/ilw-tooltip/1.0.0-alpha/ilw-tooltip.css

JSON information: ilw-tooltip.1.0-alpha.json