quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
289 lines • 7.49 kB
JSON
{
"type": "component",
"meta": {
"docsUrl": "https://v1.quasar.dev/vue-components/tooltip"
},
"props": {
"content-class": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the content",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"category": "style"
},
"content-style": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Style definitions to be attributed to the content",
"examples": [
"background-color: #ff0000",
":content-style=\"{ color: '#ff0000' }\""
],
"category": "style"
},
"value": {
"type": "Boolean",
"desc": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'input' event) OR use v-model directive",
"category": "model"
},
"max-height": {
"type": "String",
"desc": "The maximum height of the Tooltip; Size in CSS units, including unit name",
"examples": [
"16px",
"2rem"
],
"category": "content"
},
"max-width": {
"type": "String",
"desc": "The maximum width of the Tooltip; Size in CSS units, including unit name",
"examples": [
"16px",
"2rem"
],
"category": "content"
},
"transition-show": {
"type": "String",
"desc": "One of Quasar's embedded transitions",
"examples": [
"fade",
"slide-down"
],
"category": "behavior",
"default": "jump-down"
},
"transition-hide": {
"type": "String",
"desc": "One of Quasar's embedded transitions",
"examples": [
"fade",
"slide-down"
],
"category": "behavior",
"default": "jump-up"
},
"anchor": {
"type": "String",
"desc": "Two values setting the starting position or anchor point of the Tooltip relative to its target",
"values": [
"top left",
"top middle",
"top right",
"top start",
"top end",
"center left",
"center middle",
"center right",
"center start",
"center end",
"bottom left",
"bottom middle",
"bottom right",
"bottom start",
"bottom end"
],
"default": "bottom middle",
"examples": [
"top left",
"bottom right"
],
"category": "position"
},
"self": {
"type": "String",
"desc": "Two values setting the Tooltip's own position relative to its target",
"values": [
"top left",
"top middle",
"top right",
"top start",
"top end",
"center left",
"center middle",
"center right",
"center start",
"center end",
"bottom left",
"bottom middle",
"bottom right",
"bottom start",
"bottom end"
],
"default": "top middle",
"examples": [
"top left",
"bottom right"
],
"category": "position"
},
"offset": {
"type": "Array",
"desc": "An array of two numbers to offset the Tooltip horizontally and vertically in pixels",
"default": "[14, 14]",
"examples": [
"[8, 8]",
"[5, 10]"
],
"category": "position"
},
"scroll-target": {
"type": [
"Element",
"String"
],
"desc": "CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one",
"examples": [
":scroll-target=\"$refs.scrollTarget\"",
"scroll-target=\".scroll-target-class\"",
"scroll-target=\"#scroll-target-id\"",
"scroll-target=\"body\""
],
"category": "behavior",
"addedIn": "v1.8.0"
},
"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,
"values": [
"(Boolean) true",
"(Boolean) false",
"(CSS selector)"
],
"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",
"default": 0,
"examples": [
":delay=\"550\""
],
"category": "behavior"
},
"hide-delay": {
"type": "Number",
"desc": "Configure Tooltip to disappear with delay",
"default": 0,
"examples": [
":hide-delay=\"650\""
],
"category": "behavior",
"addedIn": "v1.9.5"
}
},
"slots": {
"default": {
"desc": "Default slot in the devland unslotted content of the component"
}
},
"events": {
"input": {
"desc": "Emitted when showing/hidden state changes; Is also used by v-model",
"params": {
"value": {
"type": "Boolean",
"desc": "New state (showing/hidden)"
}
}
},
"show": {
"desc": "Emitted after component has triggered show()",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"before-show": {
"desc": "Emitted when component triggers show() but before it finishes doing it",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"hide": {
"desc": "Emitted after component has triggered hide()",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"before-hide": {
"desc": "Emitted when component triggers hide() but before it finishes doing it",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
}
},
"methods": {
"show": {
"desc": "Triggers component to show",
"params": {
"evt": {
"type": "Object",
"required": false,
"desc": "JS event object"
}
}
},
"hide": {
"desc": "Triggers component to hide",
"params": {
"evt": {
"type": "Object",
"required": false,
"desc": "JS event object"
}
}
},
"toggle": {
"params": {
"evt": {
"type": "Object",
"required": false,
"desc": "JS event object"
}
},
"desc": "Triggers component to toggle between show/hide"
},
"updatePosition": {
"desc": "There are some custom scenarios for which Quasar cannot automatically reposition the tooltip without significant performance drawbacks so the optimal solution is for you to call this method when you need it"
}
}
}