Docs

Author: Guillaume Chau

README.md

@@ -216,7 +216,7 @@ Or a reactive property:
 <button v-tooltip="options">
 ```
 
-- `content` - HTML text to be displayed in the tooltip.
+- `content` - HTML text to be displayed in the tooltip. Can also be a function that returns the content or a Promise.
 - `classes` - *(see above)*
 - `targetClasses` - CSS classes added to the target element of the tooltip.
 - `delay` - Show/Hide delay, or object: `{ show: 500, hide: 100 }` (ms).
@@ -230,10 +230,26 @@ Or a reactive property:
 - `arrowSelector` - CSS selector to get the arrow element in the tooltip template.
 - `innerSelector` - CSS selector to get the inner content element in the tooltip template.
 - `autoHide` - Boolean: automatically close the tooltip on mouseover.
+- `loadingClass` - CSS classes added to the tooltip when content is loading.
+- `loadingContent` - Same as `content`, used when the actual tooltip content is loading.
 - `popperOptions` - Other Popper.js options.
 
 You can change the default values in the [Global options](#global-options).
 
+### Async content example
+
+The `content` option accepts a promise:
+
+```html
+<button
+  v-tooltip="{
+    content: asyncMethod(),
+    loadingContent: 'Please wait...',
+    loadingClass: 'content-is-loading',
+  }"
+>Hover me!</button>
+```
+
 ### Manual trigger example
 
 Use the `trigger` and `show` options:
@@ -340,6 +356,7 @@ By default, the popover will have the `tooltip` and `popover` classes, so you ca
 - `popoverInnerClass` - Class of the inner content element.
 - `autoHide` - Hide the popover if clicked outside.
 - `handleResize` - Automatically update the popover position if its size changes.
+- `open-group` - If set, will close all the open popovers that have a different `open-group` value or unset.
 
 You can change the default values in the [Global options](#global-options).
 
@@ -351,6 +368,7 @@ You can change the default values in the [Global options](#global-options).
 - `dispose`
 - `auto-hide` - Emitted when the popover is closed if clicked outside.
 - `close-directive` - Emitted when the popover is closed with the [Close directive](#close-directive).
+- `close-group` - Emitted when the popover is closed because a popover of another `open-group` was shown.
 - `resize` - Emitted when the content size changes. You must set the `handleResize` prop to `true`.
 
 ### Disable popover
@@ -402,64 +420,74 @@ data () {
 }
 ```
 
+Close all the popovers in the page with the `all` modifier:
+
+```html
+<a v-close-popover.all>Close All</a>
+```
+
 ## Global options
 
 The default global options are:
 
 ```javascript
 {
-  // Default tooltip placement relative to target element
-  defaultPlacement: 'top',
-  // Default CSS classes applied to the tooltip element
-  defaultClass: 'vue-tooltip-theme',
-  // Default CSS classes applied to the target element of the tooltip
-  defaultTargetClass: 'has-tooltip',
-  // Default HTML template of the tooltip element
-  // It must include `tooltip-arrow` & `tooltip-inner` CSS classes (can be configured, see below)
-  // Change if the classes conflict with other libraries (for example bootstrap)
-  defaultTemplate: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
-  // Selector used to get the arrow element in the tooltip template
-  defaultArrowSelector: '.tooltip-arrow, .tooltip__arrow',
-  // Selector used to get the inner content element in the tooltip template
-  defaultInnerSelector: '.tooltip-inner, .tooltip__inner',
-  // Delay (ms)
-  defaultDelay: 0,
-  // Default events that trigger the tooltip
-  defaultTrigger: 'hover focus',
-  // Default position offset (px)
-  defaultOffset: 0,
-  // Default container where the tooltip will be appended
-  defaultContainer: 'body',
-  defaultBoundariesElement: undefined,
-  defaultPopperOptions: {},
-  // Hide on mouseover tooltip
-  autoHide: true,
-  // Auto destroy tooltip DOM nodes (ms)
-  disposeTimeout: 5000,
-  // Options for popover
-  popover: {
-    defaultPlacement: 'bottom',
-    // Use the `popoverClass` prop for theming
-    defaultClass: 'vue-popover-theme',
-    // Base class (change if conflicts with other libraries)
-    defaultBaseClass: 'tooltip popover',
-    // Wrapper class (contains arrow and inner)
-    defaultWrapperClass: 'wrapper',
-    // Inner content class
-    defaultInnerClass: 'tooltip-inner popover-inner',
-    // Arrow class
-    defaultArrowClass: 'tooltip-arrow popover-arrow',
-    defaultDelay: 0,
-    defaultTrigger: 'click',
-    defaultOffset: 0,
-    defaultContainer: 'body',
-    defaultBoundariesElement: undefined,
-    defaultPopperOptions: {},
-    // Hides if clicked outside of popover
-    defaultAutoHide: true,
-    // Update popper on content resize
-    defaultHandleResize: true,
-  },
+	// Default tooltip placement relative to target element
+	defaultPlacement: 'top',
+	// Default CSS classes applied to the tooltip element
+	defaultClass: 'vue-tooltip-theme',
+	// Default CSS classes applied to the target element of the tooltip
+	defaultTargetClass: 'has-tooltip',
+	// Default HTML template of the tooltip element
+	// It must include `tooltip-arrow` & `tooltip-inner` CSS classes (can be configured, see below)
+	// Change if the classes conflict with other libraries (for example bootstrap)
+	defaultTemplate: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
+	// Selector used to get the arrow element in the tooltip template
+	defaultArrowSelector: '.tooltip-arrow, .tooltip__arrow',
+	// Selector used to get the inner content element in the tooltip template
+	defaultInnerSelector: '.tooltip-inner, .tooltip__inner',
+	// Delay (ms)
+	defaultDelay: 0,
+	// Default events that trigger the tooltip
+	defaultTrigger: 'hover focus',
+	// Default position offset (px)
+	defaultOffset: 0,
+	// Default container where the tooltip will be appended
+	defaultContainer: 'body',
+	defaultBoundariesElement: undefined,
+	defaultPopperOptions: {},
+	// Class added when content is loading
+	defaultLoadingClass: 'tooltip-loading',
+	// Displayed when tooltip content is loading
+	defaultLoadingContent: '...',
+	// Hide on mouseover tooltip
+	autoHide: true,
+	// Auto destroy tooltip DOM nodes (ms)
+	disposeTimeout: 5000,
+	// Options for popover
+	popover: {
+		defaultPlacement: 'bottom',
+		// Use the `popoverClass` prop for theming
+		defaultClass: 'vue-popover-theme',
+		// Base class (change if conflicts with other libraries)
+		defaultBaseClass: 'tooltip popover',
+		// Wrapper class (contains arrow and inner)
+		defaultWrapperClass: 'wrapper',
+		// Inner content class
+		defaultInnerClass: 'tooltip-inner popover-inner',
+		// Arrow class
+		defaultArrowClass: 'tooltip-arrow popover-arrow',
+		defaultDelay: 0,
+		defaultTrigger: 'click',
+		defaultOffset: 0,
+		defaultContainer: 'body',
+		defaultBoundariesElement: undefined,
+		defaultPopperOptions: {},
+		// Hides if clicked outside of popover
+		defaultAutoHide: true,
+		// Update popper on content resize
+		defaultHandleResize: true,
+	},
 }
 ```