CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Tooltip

Tooltips display brief text labels when users hover or focus on an element.
  • Examples
  • Properties
  • Accessibility

Examples

Web Component

Chi Vue

Props

Property
Description
Type
Default
message
To set the tooltip message to display
string
undefined
position
To set position of the tooltip
'top' | 'right' | 'bottom' | 'left'
'top'
color
To set the background color of the tooltip
'base' | 'light'
'base'

Events

Event
Description
chiTooltipShow
Tooltip show method has been executed.
chiTooltipHide
Tooltip hide method has been executed.
chiTooltipShown
Tooltip has been shown to the user and is fully visible.
chiTooltipHidden
Tooltip has been hidden to the user.

JavaScript

Events

Event
Description
chiTooltipShow
Tooltip show method has been executed.
chiTooltipHide
Tooltip hide method has been executed.

Preventing memory leaks

Tooltip components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

TipIt is safe to call the tooltip method more than once, as it will return any previously created tooltip component associated to the element.

Accessibility

Accessibility guidelines coming soon