diff --git a/ui/src/components/tooltip/QTooltip.js b/ui/src/components/tooltip/QTooltip.js index b5dafb7f9ad..fd698ce1d0e 100644 --- a/ui/src/components/tooltip/QTooltip.js +++ b/ui/src/components/tooltip/QTooltip.js @@ -1,6 +1,6 @@ import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue' -import useAnchor, { useAnchorProps } from '../../composables/private.use-anchor/use-anchor.js' +import useAnchor, { useAnchorStaticProps } from '../../composables/private.use-anchor/use-anchor.js' import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js' import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js' import usePortal from '../../composables/private.use-portal/use-portal.js' @@ -24,7 +24,7 @@ export default createComponent({ inheritAttrs: false, props: { - ...useAnchorProps, + ...useAnchorStaticProps, ...useModelToggleProps, ...useTransitionProps, diff --git a/ui/src/components/tooltip/QTooltip.json b/ui/src/components/tooltip/QTooltip.json index 948653ff2b5..5142f06c2fd 100644 --- a/ui/src/components/tooltip/QTooltip.json +++ b/ui/src/components/tooltip/QTooltip.json @@ -1,5 +1,10 @@ { - "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-portal/use-portal", "composables/private.use-transition/use-transition" ], + "mixins": [ + "composables/private.use-model-toggle/use-model-toggle", + "composables/private.use-anchor/use-anchor-static", + "composables/private.use-portal/use-portal", + "composables/private.use-transition/use-transition" + ], "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/tooltip" @@ -66,20 +71,6 @@ "extends": "scroll-target" }, - "target": { - "type": [ "Boolean", "String" ], - "desc": "Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)", - "default": "true", - "examples": [ "# :target=\"false\"", "# target=\".my-parent\"" ], - "category": "behavior" - }, - - "no-parent-event": { - "type": "Boolean", - "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)", - "category": "behavior" - }, - "delay": { "type": "Number", "desc": "Configure Tooltip to appear with delay", diff --git a/ui/src/composables/private.use-anchor/use-anchor.js b/ui/src/composables/private.use-anchor/use-anchor.js index d4341eccdf6..f32ad94ab90 100644 --- a/ui/src/composables/private.use-anchor/use-anchor.js +++ b/ui/src/composables/private.use-anchor/use-anchor.js @@ -4,11 +4,20 @@ import { clearSelection } from '../../utils/private.selection/selection.js' import { addEvt, cleanEvt, prevent } from '../../utils/event/event.js' import { isKeyCode } from '../../utils/private.keyboard/key-composition.js' +export const useAnchorStaticProps = { + /* SSR does not know about Element */ + target: __QUASAR_SSR_SERVER__ + ? { default: true } + : { + type: [ Boolean, String, Element ], + default: true + }, + + noParentEvent: Boolean +} + export const useAnchorProps = { - target: { - default: true - }, - noParentEvent: Boolean, + ...useAnchorStaticProps, contextMenu: Boolean }