Popover fade top in editable-container editable-popup năm 2024
|
Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more. Show
Make sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the quickstart guide. Setup
Default popover
User profileUse this example to show more information about a user profile when hovering over the trigger component.
Company profileThis example can be used to show more information about a company profile.
Image popoverUse this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets. Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy
Description popoverShow helpful information inside a popover when hovering over a question mark button. This is just some informational text
Progress popoverShow a progress bar with details inside a popover when hovering over a settings button.
Password strengthDynamically show the password strength progress when creating a new password positioned relative to the input element.
PlacementSet the position of the popover component relative to the trigger element by using the
Triggering
OffsetIncrease or decrease the default offset by adding the
AnimationCustomize the animation of the popover component by using the transition functions from Svelte.
Disable arrowYou can also disable the popover arrow by setting
External referenceIf you need the popover to be attached to the other element then the tiggering one you can pass a CSS query to
Component dataThe component inherits the following props, type, and default values from The Popover feature, which provides a tooltip-like behavior, can be easily applied to any interactive element via the 2 component or 3 directive. OverviewThings to know when using popover component:
TargetThe target is the trigger element (or component) that will trigger the popover. The target is specified via the 3 prop, and can be any of the following:
For more information on references, see the official . Notes: The target element must exist in the document before 2 is mounted. If the target element is not found during mount, the popover will never open. Always place your 2 component lower in the DOM than your target element. This rule also applies if a callback function is used as target element, since that callback is called only once on mount. 4 refers to standard HTML elements such as 5, 6, etc, while 5 refers to 8 or supported child elements of SVGs. PositioningTwelve options are available for positioning: 9,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9, and
0 aligned. Positioning is relative to the trigger element. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Refer to the documentation for live examples of positioning. TriggersPopovers can be triggered (opened/closed) via any combination of
1,
2 and
3. The default trigger is
1. Or a trigger of
5 can be specified, where the popover can only be opened or closed . If a popover has more than one trigger, then all triggers must be cleared before the popover will close. I.e. if a popover has the trigger
6, and it was opened by
3, and the user then clicks the trigger element, they must click it again and move focus to close the popover. Caveats with
3 trigger on 6 elements For proper cross-browser and cross-platform behavior when using only the
3 trigger, you must use an element that renders the 0 tag, not the 6 tag, and you also must include a 3 attribute. The following will generate an 0 that looks like a button: Dismiss on next click (self-dismissing)Use the
3 trigger by itself to dismiss popovers on the next click that the user makes.
3 also makes the popover activate on both
3 and
1 (as a click makes the element receive focus on most browsers, assuming it is in the tab sequence of the page). You can, however, specify your trigger as 9, which will make only a click activate the popover, and either a click on the element, or losing focus to another element or part of the document will close the popover. The special
0 trigger must be used in combination with the
1 trigger. 2 Component basic usage Component options via propsProp Default Description Supported values 3 5 Element string ID, or a reference to an element or component, that you want to trigger the popover. Required Any valid in-document unique element ID, or in-document element/component reference
5 5 Popover title (text only, no HTML). If HTML or reactivity is required, use the
5 named slot Plain text
8 5 Popover content (text only, no HTML). If HTML or reactivity is required, use the default slot Plain text 0 1 Positioning of the popover, relative to the trigger element. 2, 9,
5,
8,
2,
0,
1,
6,
7,
9,
0,
3,
4 05 06 Auto-flip placement behaviour of the popover, relative to the trigger element. 07, 08, 09, or an array of valid placements evaluated from left to right 8 11 Programmatic control of the Popover display state. Recommended to use with . 12, 11 14 15 Space separated list of event(s), which will trigger open/close of popover using built-in handling
2,
3,
1. Note
0 is a special use case to close popover on next click. 20 11 Disable fade animation when set to 12 12 or 11 25 26 Delay showing and hiding of popover by specified number of milliseconds. Can also be defined as an object in the form of 27 allowing different show and hide delays 28 and up, integers only. 29 28 Shift the center of the popover by specified number of pixels. Also affects the position of the popover arrow. Any negative or positive integer 4 5 Element string ID to append rendered popover into. If 5 or element not found, popover is appended to 6 (default) Any valid in-document unique element ID. 35 36 The container that the popover will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll 36 (default), 38, 39, or a reference to an HTML element. 40 41 Amount of pixel used to define a minimum distance between the boundaries and the popover. This makes sure the popover always has a little padding between the edges of its container. Any positive number 42 5 Contextual color variant for the popover Any contextual theme color variant name 44 5 A custom classname to apply to the popover outer wrapper element A string 46 5 An ID to use on the popover root element. If none is provided, one will automatically be generated. If you do provide an ID, it must be guaranteed to be unique on the rendered page. A valid unique element ID string Variants and custom classBootstrapVue's popovers support contextual color variants via our custom CSS, via the 42 prop: Bootstrap default theme variants are: 49, 50, 51, 52, 53, 54, 55, and 56. You can change or add additional variants via Bootstrap SCSS variables A custom class can be applied to the popover outer wrapper 5 by using the 44 prop: 42 and 44 are reactive and can be changed while the popover is open. Refer to the popover directive docs on applying variants and custom class to the directive version. Programmatically show and hide popoverYou can manually control the visibility of a popover via the syncable Boolean 61 prop. Setting it to 12 will show the popover, while setting it to 11 will hide the popover.
Programmatic control can also be affected by submitting 64 and 65 events to the popover by reference.
To make the popover shown on initial render, simply add the 61 prop on 2: A popover which is opened programmatically via the 'show' property or by an event call can only be closed programmatically. Built-in triggers will work inadequately, because trigger event will try to open the popover even though it is already opened. In the below example, when the first Popover is opened with the 'open' event, it will take two button clicks to close it. Play with the below demo to understand this. When you desire graceful handling of both programmatic control of the Popover component as well as user interaction triggers, you should disable built-in triggers and handle control yourself as demonstrated by the second Popover.
You can also use 68 events to trigger the showing and hiding of popover(s). See the Hiding and showing popovers via $root events section below for details. Programmatically disabling popoverYou can disable popover via the syncable Boolean prop 8 (default value is
12 will disable the popover. If the popover is currently visible when disabled is set to 11, it will remain visible until it is enabled or programmatically closed. If the popover is disabled/enabled via $root events (see below), your 8 value will be updated as long as you have provided the 74 prop modifier. Programmatic control can also be affected by submitting 75 and 76 events to the popover by reference. 0 When disabled, the popover can be opened programmatically (either via the 61 prop, methods or events). You can also use 68 events to trigger disabling and enabling of popover(s). See the Disabling and enabling popovers via $root events section below for details. 3 Directive usage Just need quick popovers without too much markup? Use the 3 directive: 1 Refer to the 3 directive documentation for detailed information on the directive usage. Advanced2 usage with reactive content You can even make your 2 content interactive. Just remember not to use the
3 or triggers (use only
1). If you absolutely must use a trigger other than
1 (or want to disable closing of the popover when the trigger element is clicked a second time), then you can either:
Link button with popover directive Link button with popover directive Link button with popover directive
Link button with popover directive
Link button with popover directive
For practical purposes, interactive content popovers should be minimal. The maximum width of the popover is hard coded by Bootstrap v4 CSS to 95. Tall popovers on small screens can be harder to deal with on mobile devices (such as smart-phones). 2 'Global' $root instance eventsUsing 68 instance it is possible to emit and listen events somewhere out of a component, where 97 is used. In short, 68 behaves like a global event emitters and listener. Details about 68 instance can be found in . Hiding and showing popovers via $root eventsYou can close (hide) all open popovers by emitting the 00 event on $root: 3 To close a specific popover, pass the trigger element's 46, or the 46 of the popover (if one was provided via the 46 prop), as the first argument: 4 To open (show) a specific popover, pass the trigger element's 46, or the 46 of the popover (if one was provided via the 46 prop), as the first argument when emitting the 07 event: 5 To open all popovers simultaneously, omit the 46 argument when emitting the 07 event. These events work for both the component and directive versions of popover. Note: The trigger element must exist in the DOM and be in a visible state in order for the popover to instantiate and show. Disabling and enabling popovers via $root eventsYou can disable all popovers by emitting the 10 event on $root: 6 To disable a specific popover, pass the trigger element's 46, or the 46 of the popover (if one was provided via the 46 prop), as the first argument: 7 To enable a specific popover, pass the trigger element's 46, or the 46 of the popover (if one was provided via the 46 prop), as the first argument when emitting the 17 event: 8 To enable all popovers simultaneously, omit the 46 argument when emitting the 17 event. These events work for both the component and directive versions of popover. Note: The trigger element must exist in the DOM in order for the popover to be enabled or disabled. Listening to popover changes via $root eventsTo listen to any popover opening, use: 9 Refer to the section of documentation for the full list of events. AccessibilityPopovers, in their current implementation, are not overly accessible when used as interactive components. Content may not be actively read to screen reader users, and the popover markup might not be located close to the trigger element in the DOM (as popovers usually get appended to the end of 6). When using popovers as interactive component, you should transfer focus into the popover if possible. When the popover is closed, you should return focus back to your triggering element (assuming
3 is not used as a trigger method), as we have done in the above example. You may also want to implement focus containment in the popover content while the user is interacting with it (keeping focus inside the popover until it is closed by the user). Note: The animation effect of this component is dependent on the 22 media query. See the reduced motion section of our accessibility documentation for additional details. Making popovers work for keyboard and assistive technology usersTo allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as 23s) can be made focusable by adding the 3 attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on
2 as the trigger for your popovers, as this will make them impossible to trigger for keyboard users. While you can insert rich, structured HTML and/or components in popovers via slots, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the 26 attribute. As a result, the entirety of the popover's content will be announced (read) to assistive technology users as one long, uninterrupted stream. Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover, be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing Tab will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a 27 dialog instead. Component reference2 PropertiesAll property default values are globally configurable. Property (Click to sort ascending) Type (Click to sort ascending) Default Description 35 4 or 36 or 37 36The boundary constraint of the popover: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement or component 40 40 or 37 26The popover will try and stay away from the edge of the boundary element by the number of pixels specified 4 4 or 36 or 37The container element to append the rendered popover when visible. Default's to the body element
8 37Text to place in the body of the popover 44 37CSS class (or classes) to apply to the popover's root element 25 40 or 36 or 37 26Value for the show and hide delay. Applies to both show and hide when specified as a number or string. Use object form to set show and hide delays individually 8 57 11When set to `true`, disables the component's functionality and places it in a disabled state 05 60 or 37 06Placement to use when the popover would be out of boundaries. Refer to the docs for more details 46 37Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed 20 57 11When set to `true`, disables the fade animation/transition on the component 68 57 11 29 40 or 37 28Offset (in pixels) for the arrow center compared to the trigger target element 0 37 1Placement of the popover: One of 'top', 'bottom', 'right', 'left', 'topleft', 'topright', 'bottomleft', 'bottomright', 'lefttop', 'leftbottom', 'righttop', 'rightbottom' 61 57 11When set will show the popover 3 Required 4 or 5 or 84 or 36 or 37Element string ID, or a reference to an element or component, that you want to trigger the popover
5 37Text to place in the popovers title 14 60 or 37 15Specify which triggers will show the popover. Supported values are 'click', 'hover', 'focus'. Refer to the docs for special triggers 'blur' and 'manual' 42 37Applies one of the Bootstrap theme color variants to the component SlotsName Description 95 Slot for content (HTML/components supported)
5 Optional slot for title (HTML/components supported) EventsEvent (Click to sort ascending) Arguments Description 97
99
01
03
05
07
8
11
94
87
61
19
68 event listeners You can control 2 by emitting the following events on $root: Event Arguments Description 10 46 - Popover ID to disable (optional) Disable all or a specific popover when this event is emitted on $root 17 46 - Popover ID to enable (optional) Enable all or a specific popover when this event is emitted on $root 00 46 - Popover ID to hide (optional) Close (hide) all or a specific open popover when this event is emitted on $root 07 46 - Popover ID to show (optional) Open (show) all or a specific popover when this event is emitted on $root Importing individual componentsYou can import individual components into your project via the following named exports: Component Named Export Import Path 2 32 33 Example: 0 Importing as a Vue.js pluginThis plugin includes all of the above listed individual components. Plugins also include any component aliases. What is the difference between a tooltip and a popover?Which one to use? Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon. How do you change the position of a popover?To change the position, use the position option to place the Popover above, below or on either side of the anchor element. The position options accepts the following values: right (Default)—Positions the popover on the right side of the anchor element. left —Positions the popover on the left side of the anchor element. How do you trigger a popover manually?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. How to use popover in js?Bootstrap JS Popover. JS Popover (popover. js) ... . Via data-* Attributes. The data-toggle="popover" activates the popover. ... . Via JavaScript. Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method. ... . Popover Events.. |
