Tooltip
Tooltips are useful for conveying information when an user hovers over an element.
Basic Example
Wrap the trigger element (such as an <i-button>
) and provide a <template #body>
inside an <i-tooltip>
component to create a tooltip.
Placement
Trigger tooltips at the top
, bottom
, left
or right
of elements by using the placement
property.
Each position also has a -start
or -end
variant that sets the tooltip to the start or end of the placement instead of centering it. The possible placements are:
top
top-start
top-end
bottom
bottom-start
bottom-end
left
left-start
left-end
right
right-start
right-end
Freeform
Tooltips can contain text of virtually any size. You can control the wrapping and the maximum width of the tooltip by setting white-space: normal
and a fixed width
property on the tooltip content.
Trigger Type
You can use the trigger
property to trigger the tooltip on hover
or click
. By default, tooltips are triggered on hover
, a design decision made to improve user experience.
Size Variants
You’re able to use the size
property to control the size of your tooltips, using one of the available sizes: sm
, md
, and lg
. The default size is set to md
.
Color Variants
You can choose a light or dark color for your tooltip using the color
modifier.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the tooltip - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the tooltip - Property
modelValue
TypeBoolean
Defaultfalse
Description Used to manually control the visibility of the tooltip - Property
name
TypeString
Defaultuid()
Description The identifier of the tooltip - Property
arrow
TypeBoolean
Defaulttrue
Description Displays an arrow on the tooltip pointing to the trigger element - Property
placement
Type'top' | top-start | top-end | 'bottom' | bottom-start | bottom-end | 'left' | left-start | left-end | 'right' | right-start | right-end
Defaultfalse
Description The placement of the tooltip - Property
trigger
Type'hover' | 'focus' | 'click' | 'manual'
Default'hover, focus'
Description The events used to trigger the tooltip - Property
offset
TypeNumber
Default6
Description The offset of the tooltip relative to the trigger element - Property
popperOptions
TypeObject
Default''
Description Used to override the popper.js options used for creating the tooltip - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the tooltip
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for tooltip trigger - Property
body
Description Slot for tooltip body content
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('white')
Description The background of the tooltip component - Property
----border-top-color
Valuecolor('light')
Description The border top color of the tooltip component - Property
----border-right-color
Valuecolor('light')
Description The border right color of the tooltip component - Property
----border-bottom-color
Valuecolor('light')
Description The border bottom color of the tooltip component - Property
----border-left-color
Valuecolor('light')
Description The border left color of the tooltip component - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the tooltip component - Property
----border-style
Valuevar(--border-style)
Description The border style of the tooltip component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the tooltip component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the tooltip component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the tooltip component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the tooltip component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the tooltip component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the tooltip component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the tooltip component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the tooltip component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the tooltip component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the tooltip component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the tooltip component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the tooltip component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the tooltip component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the tooltip component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the tooltip component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the tooltip component - Property
----color
Valuecontrast-color($color-white)
Description The color of the tooltip component item - Property
----font-size
Valuefont-size()
Description The font size of the tooltip component - Property
----font-weight
Valuefont-weight('normal')
Description The font weight of the tooltip component - Property
----line-height
Valuevar(--line-height)
Description The line height of the tooltip component - Property
----margin-top
Valuecalc(var(--margin-top) / 2)
Description The margin top of the tooltip component - Property
----margin-right
Valuecalc(var(--margin-right) / 2)
Description The margin right of the tooltip component - Property
----margin-bottom
Valuecalc(var(--margin-bottom) / 2)
Description The margin bottom of the tooltip component - Property
----margin-left
Valuecalc(var(--margin-left) / 2)
Description The margin left of the tooltip component - Property
----margin
Valuevar(----margin-top) var(----margin-right) var(----margin-bottom) var(----margin-left)
Description The margin of the tooltip component - Property
----padding-top
Valuecalc(var(--padding-top) * 3 / 4)
Description The padding top of the tooltip component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the tooltip component - Property
----padding-bottom
Valuecalc(var(--padding-bottom) * 3 / 4)
Description The padding bottom of the tooltip component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the tooltip component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the tooltip component - Property
----width
Value280px
Description The width of the tooltip component - Property
----z-index
Value2000
Description The z-index of the tooltip component