### Defaults

Click here to see a minimally configured tooltip. By default tooltips are triggered by clicking and they will show the contents of the title attribute of the element being clicked.

### Configurations

Tooltips can be configured.

#### class

`class: wasabi`. A tooltip with CSS class `wasabi` is displayed when the element is clicked.

`class: wasabi kohlrabi`. A tooltip with CSS classes `wasabi`, `kohlrabi` and `tooltip-container` (which is always applied): click here.

#### arrow padding

`arrow-padding: 60`. The tooltip arrow gets a padding from the edges of 60 pixel. element.

#### delay

`delay: 1000`. A tooltip is displayed with a delay of 1000 ms when hovering the mouse over the element.

#### mark-inactive

`mark-inactive: false`. The default for `mark-inactive` is `true` and it toggles the class of the trigger element between `active` and `inactive` every time the tooltip is shown or hidden. This example disables this behavior. All the other examples have it enabled (as per default). A tooltip is displayed when clicking the element.

#### trigger

`trigger: click` (default). A tooltip is displayed when the element is clicked.

`trigger: hover`. A tooltip is displayed when hovering the mouse pointer over the element.

#### close button

`closing: auto` (default). A tooltip is closed when hovering outside or clicking outside or the trigger.

`closing: sticky`. In hover mode, the tooltip is only closed when clicking outside. For click mode, there is no different behavior.

`closing: close-button`. The tooltip is only closed when clicking the close button in both trigger modes hover and click.

In any case, the tooltip is closed when a element has a ``.close-panel`` class on it. Example with close button and without close button.

#### source

`source: title` (default). Click here to see the title attribute in the tooltip.

`source: content` and `href="#"`. Click the following link to show the same content in the link inside the tooltip.

`source: ajax` and `href="#tooltip-source"`. Click the following link to show the content of the element matching the given selector inside the tooltip.

`source: ajax`. Mouse over the following link to show the content of pattern-test-response.html#myTip loaded by ajax inside the tooltip.

`source: ajax`. Click the following link to show the content of pattern-test-response.html#myTip loaded by ajax inside the tooltip.

`source: ajax`.
to show the content of pattern-test-response.html#myTip loaded by ajax inside the tooltip.

#### ajax-data-type

`ajax-data-type: markdown`. Applies when injecting content via ajax. The default is html, but this example shows a tooltip with content in markdown on click.

#### target

`target: body` (default). When clicking this link the tooltip will be appended to the `document.body`.

`target: parent`. When clicking this link the tooltip will be appended to its parent container.

`target: #tooltip-container`. When clicking this link the tooltip will be appended to an element matching the given selector.

#### position-list and position-policy

`position-list: tr` Try this

`position-list: bl` Try this

`position-list: lt` Try this

`position-list: rb` Try this

`position-list: tm` You can configure tooltips to set their preferred positions as well when they will appear. This tooltip is configured to preferably appear in the top middle, but won't appear there if there isn't enough space.

`position-list: rt; position-policy: force` You can configure tooltips to set their preferred positions as well when they will appear. This tooltip is configured to always appear in the right top, and doesn't care if there isn't enough space.

`position-list: tl` Only one position preference given to compare with previous one when scrolling.
Try this tooltip and then scroll the page up and down.

`position-list: tl, rt` The tooltip will flip its position according to your preferences when scrolling. Try this tooltip and then scroll the page up and down.

#### works with other patterns

#### programmatic triggering

This example triggers the tooltip via the option `trigger: manual` which allows you to show the tooltip via code.

Liked
Hello there
Hello there

- Clicking me closes the panel
- Clicking me has no effect
- Open a modal.
- Replace this text.