package.docs.components.Tooltip.examples.Tooltip.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Tooltip
section: components
cssPrefix: pf-v6-c-tooltip
---import "./Tooltip.css"

## Examples

### Top

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

### Right

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

### Bottom

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

### Left

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

### Left with top and bottom positions

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.




  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

### Bottom with left and right positions

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.




  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

### Left aligned text

```html

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.


```

## Documentation

### Overview

A tooltip is used to provide contextual information for another component on hover.  The tooltip itself is made up of two elements: arrow and content. One of the directional modifiers (`.pf-m-left`, `.pf-m-top`, etc.) is required on the tooltip component.

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-tooltip` | `` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
| `.pf-v6-c-tooltip__arrow` | `` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
| `.pf-v6-c-tooltip__content` | `` |  Creates the body of the tooltip. **Required** |
| `.pf-m-left{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
| `.pf-m-right{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
| `.pf-m-top{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
| `.pf-m-bottom{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
| `.pf-m-text-align-left` | `.pf-v6-c-tooltip__content` | Modifies tooltip content to text align left. |