Popovers
Use popovers to create element tooltips.
Abouts
Sometimes it is necessary to provide the user with some additional information about the element. For this you can use popovers
.
To create element popover, add role popover
to element with attribute data-role
.
To set popover text, use attribute data-popover-text="..."
.
<button class="button"
data-role="popover"
data-popover-text="This is popover!">
Hover Me
</button>
Triggers
To show popovers you can use any triggers: hover
(default), click
and focus
.
<span class="text-bold" data-role="popover"
data-popover-text="This is popover!">HOVER ME</span>
<button class="button" data-role="popover"
data-popover-text="This is popover!"
data-popover-trigger="click">Click Me</button>
<input type="text" data-role="popover"
data-popover-text="This is popover!"
data-popover-trigger="focus" placeholder="Put cursor here">
Popover text
To set popover text use attributes data-popover-text
.
Value fo this attribute can be simple text or valid html text.
You can change this attribute at runtime.
<button class="button"
data-role="popover"
data-popover-hide="0"
data-popover-text="
<iframe width='560'
height='315'
src='https://www.youtube.com/embed/MkNeIUgNPQ8?autoplay=1'
frameborder='0' allowfullscreen>
</iframe>
">
Hover Me
</button>
Popover position
You can use four positions for popovers: top
, bottom
, left
and right
.
To set position use attribute data-popover-position
.
<button class="button" data-role="popover"
data-popover-text="This is popover!"
data-popover-position="top">Top</button>
<button class="button" data-role="popover"
data-popover-text="This is popover!"
data-popover-position="right">Right</button>
<button class="button" data-role="popover"
data-popover-text="This is popover!"
data-popover-position="left">Left</button>
<button class="button" data-role="popover"
data-popover-text="This is popover!"
data-popover-position="bottom">Bottom</button>
Hiding
Attribute data-popover-hide
is responsible for closing popovers.
If a value for this attribute more then zero, popovers auto-hiding after milliseconds defined in this attribute.
If this value is zero, popover can be closed when user click on popover.
<button class="button m-1" data-role="popover"
data-popover-text="This popover closed after 5 secs!"
data-popover-position="top" data-popover-hide="5000">
Hover me
</button>
<button class="button m-1" data-role="popover"
data-popover-text="Click Me to close!"
data-popover-position="top"
data-popover-hide="0"
data-close-button="false"
>
Hover me
</button>
<button class="button m-1" data-role="popover"
data-popover-text="Click close button to close!"
data-popover-position="top" data-popover-hide="0">
Hover me
</button>
Also, you can use attribute data-hide-on-leave
to set event leave
from an element (mouse leave or touch end).
When you set value for this attribute to true
(default) then popover hiding when mouse leave or touch end.
If you set value for this attribute to false
, popover no hiding when mouse leave or touch end.
Styling
You can set your own style for popovers with attribute data-cls-popover
. Value for this attribute mus be valid css classes.
<button class="button m-1" data-role="popover"
data-popover-text="
<div class='text-center'>
<img src='images/logo.png' style='height: 64px;'>
</div>
This popover styled with custom classes!
"
data-cls-popover="bg-dark fg-orange drop-shadow"
data-popover-hide="5000">
Hover me
</button>
Events
When popovers works, it generated the numbers of events. You can use callback for this event to behavior with popovers or others.
Event | Data-* | Desc |
---|---|---|
onPopoverShow(popover, element) | data-on-popover-show |
Fired when popover showed |
onPopoverHide(popover, element) | data-on-popover-hide |
Fired when popover hided |
Methods
You can interact with popovers with popovers methods. Use show()
and hide()
methods to show/hide popovers.
<button class="button"
onclick="Metro.getPlugin('#input', 'popover').show()">
Show popover
</button>
<button class="button"
onclick="Metro.getPlugin('#input', 'popover').hide()">
Hide popover
</button>
<input type="text" data-role="popover"
data-popover-text="This is popover!"
data-popover-trigger="focus"
data-popover-hide="0" id="input">