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.
Tooltips can be configured.
class: wasabi
. A tooltip with CSS class wasabi
is displayed when the element is clicked.
delay: 1000
. A tooltip is displayed with a delay of 1000 ms when hovering the mouse over the element.
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: 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.
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: markdown
. Applies when injecting content via ajax. The default is html, but this example shows a tooltip with content in markdown on click.
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: 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.