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.

Ubi est festus coordinatae? Zion is not HOVER ME the simple truth of the wind.

                    <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">