Tooltip
Tooltips display informative text when users hover over, focus on, or tap an element.
Basic Usage
Any Paragon component or export may be added to the code example.
Light version
Any Paragon component or export may be added to the code example.
Theme Variables (SCSS)#
$tooltip-font-size: $font-size-sm !default;$tooltip-max-width: 200px !default;$tooltip-color: $white !default;$tooltip-bg: $black !default;$tooltip-border-radius: $border-radius !default;$tooltip-opacity: 1 !default;$tooltip-padding-y: .5rem !default;$tooltip-padding-x: .5rem !default;$tooltip-margin: 0 !default;$tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;$tooltip-arrow-width: .8rem !default;$tooltip-arrow-height: .4rem !default;$tooltip-arrow-color: $tooltip-bg !default;$tooltip-color-light: $black !default;$tooltip-bg-light: $white !default;$tooltip-arrow-color-light: $white !default;
Props API#
- id
stringAn html id attribute, necessary for accessibility.
- placement
enum'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'Default'right'Sets the direction the
Tooltipis positioned towards.This is generally provided by the
Overlaycomponent positioning the tooltip. - arrowProps
shape{ref:func|shape{current:},element,style:}shape{},An
Overlayinjected set of props for positioning theTooltiparrow.This is generally provided by the
Overlaycomponent positioning the tooltip. - show
boolWhether the
Overlayis shown. - popper
shape{}A
Popper.jsconfig object passed to the the underlying popper instance. - bsPrefix
stringDefault'tooltip'Overrides underlying component base CSS class name
- children
nodeSpecifies the content of the
Tooltip - className
stringSpecifies class name to append to the base element
- variant
stringThe visual style of the
Tooltip
Usage Insights#
Tooltip
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-account | 20.46.3 | 1 | |
| frontend-app-admin-portal | 20.46.3 | 11 | |
| frontend-app-authn | 20.46.2 | 1 | |
| frontend-app-course-authoring | 20.46.2 | 3 | |
| frontend-app-discussions | 20.44.0 | 19 | |
| frontend-app-gradebook | 20.45.0 | 1 | |
| frontend-app-learner-record | 20.46.3 | 1 | |
| frontend-app-learning | 20.46.0 | 1 | |
| frontend-app-publisher | 20.46.2 | 2 | |
| frontend-component-header-edx | 21.5.6 | 1 | |
| frontend-component-header | 21.5.6 | 1 | |
| frontend-lib-content-components | 21.5.6 | 3 | |
| prospectus | 20.46.2 | 8 |