Tooltips provide short, descriptive information when a user hovers over an element.

Developer Docs


Tooltips are composed of a container and a text label.


Tooltips appear when a user hovers over a trigger. A trigger can be any element you assign a tooltip to. Common tooltip triggers include icons and links. Only add a tooltip to an element if doing so increases the user’s comprehension.


Tooltip containers are compact in size, have rounded corners, and a semi transparent fill. This allows them to draw attention to themselves without being overly distracting. Denali offers default and small tooltip container sizing.

keep tooltips compact in size and use a fill color that visually differentiates the tooltip from the rest of the UI.

size up tooltips to the point that they become visually overwhelming or use a fill color that blends into the rest of the UI.

Text labels and icons

Within tooltips are text labels that describe the element the tooltip is attached to. The text color of text labels should contrast with the container fill so that they are legible. Text labels should be kept as short and concise as possible. If an element requires a lengthy description consider using another component to support that use case.

use concise descriptions within tooltips. Image at 200%.

wordy or lengthy descriptions within tooltips. Image at 200%.

Icons can be added to tooltips if doing so provides greater context to the text label. Avoid using large or detailed imagery within tooltips as well as “close” or action based icons that imply a user can interact with the tooltip.

use concise descriptions within tooltips. Image at 200%.

wordy or lengthy descriptions within tooltips. Image at 200%.


Where it makes sense to do, tooltips can be applied to almost any element.

General usage

A tooltip can be added to any element if adding the tooltip increases the user’s comprehension. It is common to see tooltips added to icons, fields, and links. However it is important to use reason when adding tooltips to elements. Avoid adding tooltips to elements that don’t need description or elements that are so large it would be difficult to understand what the tooltip is describing.

add tooltips to icons in order to increase user comprehension.

add tooltips that repeat information that is already clear to users.

add tooltips to large components that don’t need a description.


Always keep tooltips in close proximity to the elements that trigger them. Tooltips can appear to the bottom, top, left, or right of their triggering elements. Always ensure that tooltip text is legible by positioning the tooltip so that it does not get cut off by another element on the screen or the viewport.

ensure your tooltip is positioned so that it is legible.

position the tooltip in a way that it gets cut off.


Tooltips appear and disappear on hover. The tooltip should remain visible until the user mouses away from the element that triggered the tooltip.


Denali’s components are completely themeable. This allows you to use our framework and adapt the visual style of Denali’s components to match your prodcut’s unique visual brand. Check out our guide to themeing with Denali to find out more.

Dennit Racing Theme

Dennit Racing uses a customized Denali theme that aligns visually with their brand. Dennit’s tooltip features a custom container radius, fill, and type.

For all variables visit the CSS documentation page for tooltip.