Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/tooltip

Package Overview
Dependencies
Maintainers
12
Versions
290
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/tooltip - npm Package Compare versions

Comparing version 24.4.0-rc1 to 24.5.0-alpha1

17

package.json
{
"name": "@vaadin/tooltip",
"version": "24.4.0-rc1",
"version": "24.5.0-alpha1",
"publishConfig": {

@@ -39,8 +39,9 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/a11y-base": "24.4.0-rc1",
"@vaadin/component-base": "24.4.0-rc1",
"@vaadin/overlay": "24.4.0-rc1",
"@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
"@vaadin/vaadin-material-styles": "24.4.0-rc1",
"@vaadin/vaadin-themable-mixin": "24.4.0-rc1"
"@vaadin/a11y-base": "24.5.0-alpha1",
"@vaadin/component-base": "24.5.0-alpha1",
"@vaadin/overlay": "24.5.0-alpha1",
"@vaadin/popover": "24.5.0-alpha1",
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
"@vaadin/vaadin-material-styles": "24.5.0-alpha1",
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha1"
},

@@ -56,3 +57,3 @@ "devDependencies": {

],
"gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
"gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
}

21

src/vaadin-lit-tooltip-overlay.js

@@ -11,4 +11,4 @@ /**

import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { TooltipOverlayMixin } from './vaadin-tooltip-overlay-mixin.js';
import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';

@@ -23,6 +23,6 @@

* @mixes ThemableMixin
* @mixes TooltipOverlayMixin
* @mixes PopoverOverlayMixin
* @private
*/
class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
static get is() {

@@ -36,2 +36,11 @@ return 'vaadin-tooltip-overlay';

/**
* Tag name prefix used by custom properties.
* @protected
* @return {string}
*/
get _tagNamePrefix() {
return 'vaadin-tooltip';
}
/** @protected */

@@ -46,4 +55,10 @@ render() {

}
requestContentUpdate() {
super.requestContentUpdate();
this.toggleAttribute('hidden', this.textContent.trim() === '');
}
}
defineCustomElement(TooltipOverlay);

44

src/vaadin-tooltip-mixin.d.ts

@@ -8,16 +8,6 @@ /**

import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
import type { PopoverPositionMixinClass } from '@vaadin/popover/src/vaadin-popover-position-mixin.js';
import type { PopoverTargetMixinClass } from '@vaadin/popover/src/vaadin-popover-target-mixin.js';
export type TooltipPosition =
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'end-bottom'
| 'end-top'
| 'end'
| 'start-bottom'
| 'start-top'
| 'start'
| 'top-end'
| 'top-start'
| 'top';
export type { PopoverPosition as TooltipPosition } from '@vaadin/popover/src/vaadin-popover-position-mixin.js';

@@ -29,3 +19,7 @@ /**

base: T,
): Constructor<OverlayClassMixinClass> & Constructor<TooltipMixinClass> & T;
): Constructor<OverlayClassMixinClass> &
Constructor<PopoverPositionMixinClass> &
Constructor<PopoverTargetMixinClass> &
Constructor<TooltipMixinClass> &
T;

@@ -55,9 +49,2 @@ export declare class TooltipMixinClass {

/**
* The id of the element used as a tooltip trigger.
* The element should be in the DOM by the time when
* the attribute is set, otherwise a warning is shown.
*/
for: string | undefined;
/**
* Function used to generate the tooltip content.

@@ -98,10 +85,2 @@ * When provided, it overrides the `text` property.

/**
* Position of the tooltip with respect to its target.
* Supported values: `top-start`, `top`, `top-end`,
* `bottom-start`, `bottom`, `bottom-end`, `start-top`,
* `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
*/
position: TooltipPosition;
/**
* Function used to detect whether to show the tooltip based on a condition,

@@ -116,9 +95,2 @@ * called every time the tooltip is about to be shown on hover and focus.

/**
* Reference to the element used as a tooltip trigger.
* The target must be placed in the same shadow scope.
* Defaults to an element referenced with `for`.
*/
target: HTMLElement | undefined;
/**
* String used as a tooltip content.

@@ -125,0 +97,0 @@ */

149

src/vaadin-tooltip-mixin.js

@@ -7,4 +7,2 @@ /**

import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
import { microTask } from '@vaadin/component-base/src/async.js';
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';

@@ -14,2 +12,4 @@ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';

import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
import { PopoverPositionMixin } from '@vaadin/popover/src/vaadin-popover-position-mixin.js';
import { PopoverTargetMixin } from '@vaadin/popover/src/vaadin-popover-target-mixin.js';

@@ -221,5 +221,7 @@ const DEFAULT_DELAY = 500;

* @mixes OverlayClassMixin
* @mixes PopoverPositionMixin
* @mixes PopoverTargetMixin
*/
export const TooltipMixin = (superClass) =>
class TooltipMixinClass extends OverlayClassMixin(superClass) {
class TooltipMixinClass extends PopoverPositionMixin(PopoverTargetMixin(OverlayClassMixin(superClass))) {
static get properties() {

@@ -258,12 +260,2 @@ return {

/**
* The id of the element used as a tooltip trigger.
* The element should be in the DOM by the time when
* the attribute is set, otherwise a warning is shown.
*/
for: {
type: String,
observer: '__forChanged',
},
/**
* Function used to generate the tooltip content.

@@ -318,12 +310,2 @@ * When provided, it overrides the `text` property.

/**
* Position of the tooltip with respect to its target.
* Supported values: `top-start`, `top`, `top-end`,
* `bottom-start`, `bottom`, `bottom-end`, `start-top`,
* `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
*/
position: {
type: String,
},
/**
* Function used to detect whether to show the tooltip based on a condition,

@@ -343,12 +325,2 @@ * called every time the tooltip is about to be shown on hover and focus.

/**
* Reference to the element used as a tooltip trigger.
* The target must be placed in the same shadow scope.
* Defaults to an element referenced with `for`.
*/
target: {
type: Object,
observer: '__targetChanged',
},
/**
* String used as a tooltip content.

@@ -384,8 +356,2 @@ */

/** @private */
__effectivePosition: {
type: String,
computed: '__computePosition(position, _position)',
},
/** @private */
__isTargetHidden: {

@@ -402,11 +368,2 @@ type: Boolean,

/**
* Default value used when `position` property is not set.
* @protected
*/
_position: {
type: String,
value: 'bottom',
},
/** @private */

@@ -521,22 +478,2 @@ _srLabel: {

/** @private */
__computeHorizontalAlign(position) {
return ['top-end', 'bottom-end', 'start-top', 'start', 'start-bottom'].includes(position) ? 'end' : 'start';
}
/** @private */
__computeNoHorizontalOverlap(position) {
return ['start-top', 'start', 'start-bottom', 'end-top', 'end', 'end-bottom'].includes(position);
}
/** @private */
__computeNoVerticalOverlap(position) {
return ['top-start', 'top-end', 'top', 'bottom-start', 'bottom', 'bottom-end'].includes(position);
}
/** @private */
__computeVerticalAlign(position) {
return ['top-start', 'top-end', 'top', 'start-bottom', 'end-bottom'].includes(position) ? 'bottom' : 'top';
}
/** @private */
__computeOpened(manual, opened, autoOpened, connected) {

@@ -547,7 +484,2 @@ return connected && (manual ? opened : autoOpened);

/** @private */
__computePosition(position, defaultPosition) {
return position || defaultPosition;
}
/** @private */
__autoOpenedChanged(opened, oldOpened) {

@@ -561,50 +493,33 @@ if (opened) {

/** @private */
__forChanged(forId) {
if (forId) {
this.__setTargetByIdDebouncer = Debouncer.debounce(this.__setTargetByIdDebouncer, microTask, () =>
this.__setTargetById(forId),
);
}
}
/**
* @param {HTMLElement} target
* @protected
* @override
*/
_addTargetListeners(target) {
target.addEventListener('mouseenter', this.__onMouseEnter);
target.addEventListener('mouseleave', this.__onMouseLeave);
target.addEventListener('focusin', this.__onFocusin);
target.addEventListener('focusout', this.__onFocusout);
target.addEventListener('mousedown', this.__onMouseDown);
/** @private */
__setTargetById(targetId) {
if (!this.isConnected) {
return;
}
const target = this.getRootNode().getElementById(targetId);
if (target) {
this.target = target;
} else {
console.warn(`No element with id="${targetId}" found to show tooltip.`);
}
// Wait before observing to avoid Chrome issue.
requestAnimationFrame(() => {
this.__targetVisibilityObserver.observe(target);
});
}
/** @private */
__targetChanged(target, oldTarget) {
if (oldTarget) {
oldTarget.removeEventListener('mouseenter', this.__onMouseEnter);
oldTarget.removeEventListener('mouseleave', this.__onMouseLeave);
oldTarget.removeEventListener('focusin', this.__onFocusin);
oldTarget.removeEventListener('focusout', this.__onFocusout);
oldTarget.removeEventListener('mousedown', this.__onMouseDown);
/**
* @param {HTMLElement} target
* @protected
* @override
*/
_removeTargetListeners(target) {
target.removeEventListener('mouseenter', this.__onMouseEnter);
target.removeEventListener('mouseleave', this.__onMouseLeave);
target.removeEventListener('focusin', this.__onFocusin);
target.removeEventListener('focusout', this.__onFocusout);
target.removeEventListener('mousedown', this.__onMouseDown);
this.__targetVisibilityObserver.unobserve(oldTarget);
}
if (target) {
target.addEventListener('mouseenter', this.__onMouseEnter);
target.addEventListener('mouseleave', this.__onMouseLeave);
target.addEventListener('focusin', this.__onFocusin);
target.addEventListener('focusout', this.__onFocusout);
target.addEventListener('mousedown', this.__onMouseDown);
// Wait before observing to avoid Chrome issue.
requestAnimationFrame(() => {
this.__targetVisibilityObserver.observe(target);
});
}
this.__targetVisibilityObserver.unobserve(target);
}

@@ -611,0 +526,0 @@

21

src/vaadin-tooltip-overlay.js

@@ -10,4 +10,4 @@ /**

import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { TooltipOverlayMixin } from './vaadin-tooltip-overlay-mixin.js';
import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';

@@ -26,6 +26,6 @@

* @mixes ThemableMixin
* @mixes TooltipOverlayMixin
* @mixes PopoverOverlayMixin
* @private
*/
class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
static get is() {

@@ -44,2 +44,11 @@ return 'vaadin-tooltip-overlay';

/**
* Tag name prefix used by custom properties.
* @protected
* @return {string}
*/
get _tagNamePrefix() {
return 'vaadin-tooltip';
}
/** @protected */

@@ -55,4 +64,10 @@ ready() {

}
requestContentUpdate() {
super.requestContentUpdate();
this.toggleAttribute('hidden', this.textContent.trim() === '');
}
}
defineCustomElement(TooltipOverlay);

98

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "24.4.0-rc1",
"version": "24.5.0-alpha1",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-tooltip",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-rc1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` 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 `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` 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.",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` 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 `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` 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.",
"attributes": [

@@ -26,7 +26,7 @@ {

{
"name": "focus-delay",
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
"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": [
"number",
"string",
"null",

@@ -39,3 +39,3 @@ "undefined"

"name": "for",
"description": "The id of the element used as a tooltip trigger.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
"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": {

@@ -50,2 +50,13 @@ "type": [

{
"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": "hide-delay",

@@ -95,13 +106,2 @@ "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.",

{
"name": "position",
"description": "Position of the tooltip with respect to its 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",

@@ -143,6 +143,28 @@ "description": "String used as a tooltip content.",

{
"name": "ariaTarget",
"description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
"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": "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": "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",

@@ -155,4 +177,4 @@ "null",

{
"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.",
"name": "ariaTarget",
"description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
"value": {

@@ -167,7 +189,7 @@ "type": [

{
"name": "focusDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
"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": [
"number",
"Object",
"null",

@@ -179,7 +201,7 @@ "undefined"

{
"name": "for",
"description": "The id of the element used as a tooltip trigger.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
"name": "focusDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
"value": {
"type": [
"string",
"number",
"null",

@@ -246,13 +268,2 @@ "undefined"

{
"name": "position",
"description": "Position of the tooltip with respect to its 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",

@@ -269,13 +280,2 @@ "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`.",

{
"name": "target",
"description": "Reference to the element used as a tooltip trigger.\nThe target must be placed in the same shadow scope.\nDefaults to an element referenced with `for`.",
"value": {
"type": [
"Object",
"null",
"undefined"
]
}
},
{
"name": "text",

@@ -282,0 +282,0 @@ "description": "String used as a tooltip content.",

44

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "24.4.0-rc1",
"version": "24.5.0-alpha1",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-tooltip",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-rc1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` 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 `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` 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.",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` 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 `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` 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,

@@ -45,4 +45,4 @@ "attributes": [

{
"name": ".ariaTarget",
"description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
"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": {

@@ -53,4 +53,4 @@ "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.",
"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": {

@@ -61,4 +61,4 @@ "kind": "expression"

{
"name": ".focusDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
"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": {

@@ -69,4 +69,4 @@ "kind": "expression"

{
"name": ".for",
"description": "The id of the element used as a tooltip trigger.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
"name": ".ariaTarget",
"description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
"value": {

@@ -77,4 +77,4 @@ "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.",
"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": {

@@ -85,4 +85,4 @@ "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.",
"name": ".focusDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
"value": {

@@ -93,4 +93,4 @@ "kind": "expression"

{
"name": ".hoverDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
"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": {

@@ -101,4 +101,4 @@ "kind": "expression"

{
"name": ".position",
"description": "Position of the tooltip with respect to its 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`.",
"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": {

@@ -109,4 +109,4 @@ "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`.",
"name": ".hoverDelay",
"description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
"value": {

@@ -117,4 +117,4 @@ "kind": "expression"

{
"name": ".target",
"description": "Reference to the element used as a tooltip trigger.\nThe target must be placed in the same shadow scope.\nDefaults to an element referenced with `for`.",
"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": {

@@ -121,0 +121,0 @@ "kind": "expression"

src/vaadin-tooltip-overlay-mixin.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc