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

@vaadin/tooltip

Package Overview
Dependencies
Maintainers
12
Versions
286
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/tooltip - npm Package Compare versions

Comparing version 23.3.0-alpha1 to 23.3.0-alpha2

14

package.json
{
"name": "@vaadin/tooltip",
"version": "23.3.0-alpha1",
"version": "23.3.0-alpha2",
"publishConfig": {

@@ -38,7 +38,7 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/component-base": "23.3.0-alpha1",
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
"@vaadin/vaadin-material-styles": "23.3.0-alpha1",
"@vaadin/vaadin-overlay": "23.3.0-alpha1",
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
"@vaadin/component-base": "23.3.0-alpha2",
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
"@vaadin/vaadin-material-styles": "23.3.0-alpha2",
"@vaadin/vaadin-overlay": "23.3.0-alpha2",
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
},

@@ -54,3 +54,3 @@ "devDependencies": {

],
"gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
"gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
}

@@ -67,2 +67,13 @@ /**

/** @protected */
ready() {
super.ready();
// When setting `manual` and `opened` attributes, the overlay is already moved to body
// by the time when `ready()` callback of the `vaadin-tooltip` is executed by Polymer,
// so querySelector() would return null. So we use this workaround to set properties.
this.owner = this.__dataHost;
this.owner._overlayElement = this;
}
requestContentUpdate() {

@@ -69,0 +80,0 @@ super.requestContentUpdate();

@@ -81,4 +81,5 @@ /**

/**
* Object with properties passed to `textGenerator`
* function to be used for generating tooltip text.
* Object with properties passed to `generator` and
* `shouldShow` functions for generating tooltip text
* or detecting whether to show the tooltip or not.
*/

@@ -139,6 +140,7 @@ context: Record<string, unknown>;

* called every time the tooltip is about to be shown on hover and focus.
* The function accepts a reference to the target element as a parameter.
* The function takes two parameters: `target` and `context`, which contain
* values of the corresponding tooltip properties at the time of calling.
* The tooltip is only shown when the function invocation returns `true`.
*/
shouldShow: (target: HTMLElement) => boolean;
shouldShow: (target: HTMLElement, context?: Record<string, unknown>) => boolean;

@@ -163,3 +165,3 @@ /**

*/
textGenerator: (context: Record<string, unknown>) => string;
generator: (context: Record<string, unknown>) => string;
}

@@ -166,0 +168,0 @@

@@ -92,2 +92,3 @@ /**

vertical-align="[[__computeVerticalAlign(position)]]"
on-mouseleave="__onOverlayMouseLeave"
modeless

@@ -101,4 +102,5 @@ ></vaadin-tooltip-overlay>

/**
* Object with properties passed to `textGenerator`
* function to be used for generating tooltip text.
* Object with properties passed to `generator` and
* `shouldShow` functions for generating tooltip text
* or detecting whether to show the tooltip or not.
*/

@@ -182,3 +184,4 @@ context: {

* called every time the tooltip is about to be shown on hover and focus.
* The function accepts a reference to the target element as a parameter.
* The function takes two parameters: `target` and `context`, which contain
* values of the corresponding tooltip properties at the time of calling.
* The tooltip is only shown when the function invocation returns `true`.

@@ -189,3 +192,3 @@ */

value: () => {
return (_target) => true;
return (_target, _context) => true;
},

@@ -218,3 +221,3 @@ },

*/
textGenerator: {
generator: {
type: Object,

@@ -245,3 +248,3 @@ },

static get observers() {
return ['__textGeneratorChanged(_overlayElement, textGenerator, context)'];
return ['__generatorChanged(_overlayElement, generator, context)'];
}

@@ -301,10 +304,2 @@

/** @protected */
ready() {
super.ready();
this._overlayElement = this.shadowRoot.querySelector('vaadin-tooltip-overlay');
this._overlayElement.owner = this;
}
/** @protected */
disconnectedCallback() {

@@ -345,3 +340,3 @@ super.disconnectedCallback();

__tooltipRenderer(root) {
root.textContent = typeof this.textGenerator === 'function' ? this.textGenerator(this.context) : this.text;
root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
}

@@ -392,3 +387,6 @@

this.__targetVisibilityObserver.observe(target);
// Wait before observing to avoid Chrome issue.
requestAnimationFrame(() => {
this.__targetVisibilityObserver.observe(target);
});

@@ -401,2 +399,6 @@ addValueToAttribute(target, 'aria-describedby', this._uniqueId);

__onFocusin(event) {
if (this.manual) {
return;
}
// Only open on keyboard focus.

@@ -412,3 +414,3 @@ if (!isKeyboardActive()) {

if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
if (!this.__isShouldShow()) {
return;

@@ -426,2 +428,6 @@ }

__onFocusout(event) {
if (this.manual) {
return;
}
// Do not close when moving focus within a component.

@@ -454,6 +460,10 @@ if (this.target.contains(event.relatedTarget)) {

__onMouseEnter() {
if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
if (this.manual) {
return;
}
if (!this.__isShouldShow()) {
return;
}
if (this.__hoverInside) {

@@ -472,3 +482,21 @@ // Already hovering inside the element, do nothing.

/** @private */
__onMouseLeave() {
__onMouseLeave(event) {
if (event.relatedTarget !== this._overlayElement) {
this.__handleMouseLeave();
}
}
/** @private */
__onOverlayMouseLeave(event) {
if (event.relatedTarget !== this.target) {
this.__handleMouseLeave();
}
}
/** @private */
__handleMouseLeave() {
if (this.manual) {
return;
}
this.__hoverInside = false;

@@ -498,2 +526,11 @@

/** @private */
__isShouldShow() {
if (typeof this.shouldShow === 'function' && this.shouldShow(this.target, this.context) !== true) {
return false;
}
return true;
}
/**

@@ -650,9 +687,9 @@ * Schedule opening the tooltip.

/** @private */
__textGeneratorChanged(overlayElement, textGenerator, context) {
__generatorChanged(overlayElement, generator, context) {
if (overlayElement) {
if (textGenerator !== this.__oldTextGenerator || context !== this.__oldContext) {
if (generator !== this.__oldTextGenerator || context !== this.__oldContext) {
overlayElement.requestContentUpdate();
}
this.__oldTextGenerator = textGenerator;
this.__oldTextGenerator = generator;
this.__oldContext = context;

@@ -659,0 +696,0 @@ }

{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "23.3.0-alpha1",
"version": "23.3.0-alpha2",
"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/23.3.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/custom-theme/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/23.3.0-alpha2/#/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/custom-theme/styling-components) documentation.",
"attributes": [

@@ -118,3 +118,3 @@ {

"name": "context",
"description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.",
"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": {

@@ -207,3 +207,3 @@ "type": [

"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 accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.",
"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": {

@@ -240,3 +240,3 @@ "type": [

{
"name": "textGenerator",
"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.",

@@ -243,0 +243,0 @@ "value": {

{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "23.3.0-alpha1",
"version": "23.3.0-alpha2",
"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/23.3.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/custom-theme/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/23.3.0-alpha2/#/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/custom-theme/styling-components) documentation.",
"extension": true,

@@ -39,3 +39,3 @@ "attributes": [

"name": ".context",
"description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.",
"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": {

@@ -82,3 +82,3 @@ "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 accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.",
"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": {

@@ -103,3 +103,3 @@ "kind": "expression"

{
"name": ".textGenerator",
"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.",

@@ -106,0 +106,0 @@ "value": {

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc