Vue Popovers - free examples & tutorial (original) (raw)

Vue Bootstrap 5 Popover component

Documentation and examples for adding popovers, like those found in iOS, to any element on your site.

Note: Read the API tab to find all available options and advanced customization

Basic example

Overview

Things to know when using the popovers:

• Zero-length header and body slots values will never show a popover.
• Triggering popovers on hidden elements will not work.
• Popovers for .disabled or disabled elements must be triggered on a wrapper element.
• When referenced from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use.text-nowrap on your #reference slot content to avoid this behavior.
• Popovers must be hidden before their corresponding elements have been removed from the DOM.
• Popovers can be triggered thanks to an element inside a shadow DOM.

Four directions

Four options are available: top, right, bottom, and left aligned fordirection property.

Dismiss on next click

Use the dismissible property to dismiss popovers on the user’s next click of a different element than the toggle element.

Specific markup required for dismiss-on-next-click:
For proper cross-browser and cross-platform behavior, you must use theanchor element, not the button element, and you also must include atabindex attribute.

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span> and override the pointer-events on the disabled element.

For disabled popover triggers, you may also prefer to usehover property so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.