@extends('layouts.vertical', ['pageTitle' => 'Popovers']) @section('css') @endsection @section('page-title') @include('layouts.partials/app-pagetitle', ['pageTitle'=> 'Popovers', 'pageSubTitle1' => 'Design', 'pageSubTitle2'=> 'UI Components', 'pageSubText' => 'Bootstrap popovers are interactive, dismissible overlays that provide additional content when users click or hover over an element.']) @endsection @section('content')

Basic Popover

Minimalistic popover with no content - just title

Popover Content

Default content value if data-content={string|element|function} attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

Popover Animation

Disable the CSS fade transition to the popover using attribute data-bs-animation="false"

Popover Title

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

Popover Container

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize
hide container
The popover is nested inside this container but displayed on the element above. Once this container is hidden the popover will not be visible. Try hiding this container by pressing the "hide" button above

Delayed Popover

Delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }

Popover Placement

Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set data-bs-placement to change the direction.

Popover Triggers

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

Popover Template

Base HTML to use when creating a popover in Bootstrap 5. The popover's title is injected into an element with the .popover-header class, and the content is injected into an element with the .popover-body class. The popover includes an .arrow element for the pointer. The outermost wrapper of the popover must have the .popover class, and it is automatically generated by Bootstrap's JavaScript when initializing a popover.

Dismissable Popover

Use the focus trigger to dismiss popovers on the user’s next click of an element other than the toggle element. Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.
Dismissible popover
@endsection @section('scripts') @endsection