diff --git a/src/directives/v-tooltip.js b/src/directives/v-tooltip.js
index 8efe2427..0c6e99f6 100644
--- a/src/directives/v-tooltip.js
+++ b/src/directives/v-tooltip.js
@@ -20,69 +20,71 @@ const positions = [
'left-end',
]
-export const defaultOptions = {
- // 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',
- // Is the content HTML by default?
- defaultHtml: true,
- // 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: '
',
- // 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,
- // Close tooltip on click on tooltip target?
- defaultHideOnTargetClick: 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',
- // Class added when popover is open
- defaultOpenClass: 'open',
+export function defaultOptions () {
+ return {
+ // 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',
+ // Is the content HTML by default?
+ defaultHtml: true,
+ // 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: '',
+ // 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,
- defaultTrigger: 'click',
+ // 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: {},
- // Hides if clicked outside of popover
- defaultAutoHide: true,
- // Update popper on content resize
- defaultHandleResize: true,
- },
+ // Class added when content is loading
+ defaultLoadingClass: 'tooltip-loading',
+ // Displayed when tooltip content is loading
+ defaultLoadingContent: '...',
+ // Hide on mouseover tooltip
+ autoHide: true,
+ // Close tooltip on click on tooltip target?
+ defaultHideOnTargetClick: 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',
+ // Class added when popover is open
+ defaultOpenClass: 'open',
+ 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,
+ },
+ }
}
export function getOptions (options) {
@@ -215,7 +217,7 @@ export function bind (el, { value, oldValue, modifiers }) {
}
export const directive = {
- options: defaultOptions,
+ options: defaultOptions(),
bind,
update: bind,
unbind (el) {
diff --git a/src/directives/v-tooltip.spec.js b/src/directives/v-tooltip.spec.js
index ef2c0d98..18aa8cb2 100644
--- a/src/directives/v-tooltip.spec.js
+++ b/src/directives/v-tooltip.spec.js
@@ -73,22 +73,23 @@ describe('getOptions', () => {
test('defaultOptions', () => {
const options = {}
const result = VTooltip.getOptions(options)
+ const defaultOptions = VTooltip.defaultOptions()
expect(result).toEqual({
- placement: VTooltip.defaultOptions.defaultPlacement,
- delay: VTooltip.defaultOptions.defaultDelay,
- html: VTooltip.defaultOptions.defaultHtml,
- template: VTooltip.defaultOptions.defaultTemplate,
- innerSelector: VTooltip.defaultOptions.defaultInnerSelector,
- arrowSelector: VTooltip.defaultOptions.defaultArrowSelector,
- trigger: VTooltip.defaultOptions.defaultTrigger,
- offset: VTooltip.defaultOptions.defaultOffset,
- container: VTooltip.defaultOptions.defaultContainer,
- boundariesElement: VTooltip.defaultOptions.defaultBoundariesElement,
- autoHide: VTooltip.defaultOptions.autoHide,
- hideOnTargetClick: VTooltip.defaultOptions.defaultHideOnTargetClick,
- loadingClass: VTooltip.defaultOptions.defaultLoadingClass,
- loadingContent: VTooltip.defaultOptions.defaultLoadingContent,
- popperOptions: VTooltip.defaultOptions.defaultPopperOptions,
+ placement: defaultOptions.defaultPlacement,
+ delay: defaultOptions.defaultDelay,
+ html: defaultOptions.defaultHtml,
+ template: defaultOptions.defaultTemplate,
+ innerSelector: defaultOptions.defaultInnerSelector,
+ arrowSelector: defaultOptions.defaultArrowSelector,
+ trigger: defaultOptions.defaultTrigger,
+ offset: defaultOptions.defaultOffset,
+ container: defaultOptions.defaultContainer,
+ boundariesElement: defaultOptions.defaultBoundariesElement,
+ autoHide: defaultOptions.autoHide,
+ hideOnTargetClick: defaultOptions.defaultHideOnTargetClick,
+ loadingClass: defaultOptions.defaultLoadingClass,
+ loadingContent: defaultOptions.defaultLoadingContent,
+ popperOptions: defaultOptions.defaultPopperOptions,
})
})
})
diff --git a/src/index.js b/src/index.js
index 3cf65eff..f465e81c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,7 @@ export function install (Vue, options = {}) {
install.installed = true
const finalOptions = {}
- merge(finalOptions, defaultOptions, options)
+ merge(finalOptions, defaultOptions(), options)
plugin.options = finalOptions
vtooltip.options = finalOptions