A tooltip is a highly contextual form of an overlay. Triggered on hover, tooltips are designed to provide a small amount of additive information within a high contrast background to provide a clear visual indicator to the user. Tooltips also have several options for pointer position depending on where the tooltip is needed and where the trigger falls within viewport.



A tooltip should be used in scenarios where a user might need additional information to describe an icon or provice a 1-2 sentence description or instruction. If more than 1-2 lines of text is needed, consider providing the information on screen or through a dialog.

Trigger Scenarios

Unlabeled Icons (Most Common)

Additional Information or to define a term that is unique to the product Text should be semibold to indicate an action and be paired with the “i” icon (16x16) or another relevant icon

Position Guidelines

Position Tooltips so they don’t block relevant information. Some scenarios, like within a block of text or in a table cell, a tooltip may slightly cover other elements or text. It’s recommended to test your tooltip position to determine which position will provide the least amount of interference to the user’s task.



titletext to be displayed in the tooltipStringtruefalse
placementdetermines the placement of the tooltip around the slot
pointer-alignmentdetermines the alignment of the pointer on the
enterDelaydelay in ms before tooltip should appearnumberfalse400
exitdelay in ms before tooltip should disappearnumberfalse400


  • default - element that the tooltip should appear around. This slot is scoped, it provides attrs and on which should be passed to v-bind and v-on respectively. See the example.


We expose two enums that you can use to define both placement and pointer-alignment props. You can import those enums alongside the FeatherTooltip component.

import {
} from "@featherds/tooltip";

PopoverPlacement has the following properties:

  • top, places the tooltip above the triggering element
  • bottom, places the tooltip below the triggering element
  • left, places the tooltip to the left of the triggering element
  • right, places the tooltip to the right of the triggering element

PointerAlignment has the following properties:

  • center, the pointer will appear in the center of the tooltip content
  • left, the pointer will appear close to the left side of the tooltip content
  • right, the pointer will appear close to the right side of the tooltip content