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.