Tooltip

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-tooltip
  1. Usage
  2. rh-tooltip

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-tooltip/rh-tooltip.js": "./elements/rh-tooltip/rh-tooltip.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.11/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Usage

rh-tooltip

Slots 2
Slot Name Description

Place invoking element here, i.e. the element which when hovered the tooltip will display. Must be inline content.
content

Place tooltip content here. Overrides the content attribute.
Attributes 2
Attribute DOM Property Description Type Default
position position

The position of the tooltip, relative to the invoking content

 
Placement

'top'
content content

Tooltip content. Overridden by the content slot

 
string | undefined

unknown
Methods 2
Method Name Description
show()

Show the tooltip
hide()

Hide the tooltip
Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 9
CSS Property Description Default
--rh-tooltip-arrow-size 11px
--rh-tooltip-content-background-color #ffffff
--rh-tooltip-content-color #151515
--rh-tooltip-max-width 18.75rem
--rh-tooltip-content-padding-block-start 16px
--rh-tooltip-content-padding-inline-end 16px
--rh-tooltip-content-padding-block-end 16px
--rh-tooltip-content-padding-inline-start 16px
--rh-tooltip-content-font-size 0.875rem
Design Tokens 9
Token Copy
--rh-border-radius-default
--rh-box-shadow-sm
--rh-color-surface-darkest
--rh-color-surface-lightest
--rh-color-text-primary-on-dark
--rh-color-text-primary-on-light
--rh-font-size-body-text-sm
--rh-line-height-body-text
--rh-space-lg
Edit this page on GitHub