{ "$schema": "https://json.schemastore.org/web-types", "name": "@vaadin/tooltip", "version": "25.1.1", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "vaadin-tooltip", "description": "`` is a Web Component for creating tooltips.\n\n```html\n\n\n```\n\n### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n\n\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------- | ---------------\n`overlay` | The overlay element\n`content` | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`markdown` | Reflects the `markdown` property value.\n`position` | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-tooltip-background` |\n| `--vaadin-tooltip-border-color` |\n| `--vaadin-tooltip-border-radius` |\n| `--vaadin-tooltip-border-width` |\n| `--vaadin-tooltip-font-size` |\n| `--vaadin-tooltip-font-weight` |\n| `--vaadin-tooltip-line-height` |\n| `--vaadin-tooltip-max-width` |\n| `--vaadin-tooltip-offset-bottom` |\n| `--vaadin-tooltip-offset-end` |\n| `--vaadin-tooltip-offset-start` |\n| `--vaadin-tooltip-offset-top` |\n| `--vaadin-tooltip-padding` |\n| `--vaadin-tooltip-shadow` |\n| `--vaadin-tooltip-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", "attributes": [ { "name": "focus-delay", "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.", "value": { "type": [ "number", "null", "undefined" ] } }, { "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": { "type": [ "string", "null", "undefined" ] } }, { "name": "hide-delay", "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": { "type": [ "number", "null", "undefined" ] } }, { "name": "hover-delay", "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "manual", "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "markdown", "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "opened", "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "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": { "type": [ "string", "null", "undefined" ] } }, { "name": "text", "description": "String used as a tooltip content.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "theme", "description": "The theme variants to apply to the component.", "value": { "type": [ "string", "null", "undefined" ] } } ], "js": { "properties": [ { "name": "ariaTarget", "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.", "value": { "type": [ "Object", "null", "undefined" ] } }, { "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": { "type": [ "Object", "null", "undefined" ] } }, { "name": "focusDelay", "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.", "value": { "type": [ "number", "null", "undefined" ] } }, { "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": { "type": [ "string", "null", "undefined" ] } }, { "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": { "type": [ "Object", "null", "undefined" ] } }, { "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": { "type": [ "number", "null", "undefined" ] } }, { "name": "hoverDelay", "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "manual", "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "markdown", "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "opened", "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "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": { "type": [ "string", "null", "undefined" ] } }, { "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": { "type": [ "Object", "null", "undefined" ] } }, { "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": { "type": [ "Object", "null", "undefined" ] } }, { "name": "text", "description": "String used as a tooltip content.", "value": { "type": [ "string", "null", "undefined" ] } } ], "events": [ { "name": "content-changed", "description": "Fired when the tooltip text content is changed." } ] } } ] } } }