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: content 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: auto and href="#tooltip-source". Click the following link to show the content of the element matching the given selector 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

Liked
Hello there
Hello there