tooltippackage.web-types.lit.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "24.5.3",
"description-markup": "markdown",
"framework": "lit",
"framework-config": {
"enable-when": {
"node-packages": [
"lit"
]
}
},
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-tooltip",
"description": "`` is a Web Component for creating tooltips.\n\n```html\n\n` uses `` internal\nthemable component as the actual visible overlay.\n\nSee [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-overlay) documentation\nfor `` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `` is\npropagated to the internal `` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,
"attributes": [
{
"name": "?manual",
"description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
"value": {
"kind": "expression"
}
},
{
"name": "?opened",
"description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
"value": {
"kind": "expression"
}
},
{
"name": ".overlayClass",
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
"value": {
"kind": "expression"
}
},
{
"name": ".position",
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
"value": {
"kind": "expression"
}
},
{
"name": ".for",
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
"value": {
"kind": "expression"
}
},
{
"name": ".target",
"description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
"value": {
"kind": "expression"
}
},
{
"name": ".ariaTarget",
"description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
"value": {
"kind": "expression"
}
},
{
"name": ".context",
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
"value": {
"kind": "expression"
}
},
{
"name": ".focusDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
"value": {
"kind": "expression"
}
},
{
"name": ".generator",
"description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.",
"value": {
"kind": "expression"
}
},
{
"name": ".hideDelay",
"description": "The delay in milliseconds before the tooltip\nis closed on losing hover, when not in manual mode.\nOn blur, the tooltip is closed immediately.",
"value": {
"kind": "expression"
}
},
{
"name": ".hoverDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
"value": {
"kind": "expression"
}
},
{
"name": ".shouldShow",
"description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
"value": {
"kind": "expression"
}
},
{
"name": ".text",
"description": "String used as a tooltip content.",
"value": {
"kind": "expression"
}
}
]
}
]
}
}
}