diff --git a/.tool-versions b/.tool-versions new file mode 100644 index 0000000..2d8169e --- /dev/null +++ b/.tool-versions @@ -0,0 +1 @@ +nodejs 14.17.6 diff --git a/dist/index.babel.js b/dist/index.babel.js index f145d94..c19f60f 100644 --- a/dist/index.babel.js +++ b/dist/index.babel.js @@ -116,6 +116,11 @@ this.popper && this.popper.destroy(); + }, + onFocusOut: function onFocusOut() { + // Close the tooltip when the element loses focus. + // This happens when React updates the element. + this.onMouseleave(); } }); diff --git a/dist/webpack.bundle.js b/dist/webpack.bundle.js index 597a1c8..71c1323 100644 --- a/dist/webpack.bundle.js +++ b/dist/webpack.bundle.js @@ -874,7 +874,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var wicked_elements__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! wicked-elements */ \"./node_modules/wicked-elements/esm/index.js\");\n/* harmony import */ var _popperjs_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @popperjs/core */ \"./node_modules/@popperjs/core/lib/index.js\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles.css */ \"./src/styles.css\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_styles_css__WEBPACK_IMPORTED_MODULE_2__);\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n\n\n\nvar ID_TOOLTIP = '#pep-tooltips';\n/**\n * Upgrades elements with the `tooltip` attribute to enable tooltips.\n * Positions the tooltip wrapper element\n * and replaces the content with the value from the attribute.\n */\n\nObject(wicked_elements__WEBPACK_IMPORTED_MODULE_0__[\"define\"])('[tooltip]', {\n get elmTooltip() {\n var elm = document.querySelector(ID_TOOLTIP);\n\n if (!elm) {\n throw new Error(\"Could not find the element \".concat(ID_TOOLTIP, \".\\nThis element is required for tooltips.\"));\n }\n\n return elm;\n },\n\n onMouseenter: function onMouseenter() {\n var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4;\n\n var el = this.element;\n var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement\n\n var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1\n\n var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1\n\n var customClasses = ((_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4.tooltipClass) || null;\n var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text\n\n if (body === '' || !body) {\n return;\n } // Replace the content in the element with the text value from the attribute.\n\n\n this.elmTooltip.innerHTML = body; // Apply custom class\n\n if (customClasses) {\n var _this$elmTooltip$clas;\n\n (_this$elmTooltip$clas = this.elmTooltip.classList).add.apply(_this$elmTooltip$clas, _toConsumableArray(customClasses.split(' ')));\n } // Create a popper to manage the element's position.\n\n\n this.popper = Object(_popperjs_core__WEBPACK_IMPORTED_MODULE_1__[\"createPopper\"])(this.element, this.elmTooltip, {\n placement: placement,\n modifiers: [{\n name: 'offset',\n options: {\n offset: [offsetSkidding, offsetDistance]\n }\n }]\n }); // Show the tooltip element.\n\n this.elmTooltip.style.display = 'inherit';\n },\n onMouseleave: function onMouseleave() {\n var _el$dataset5;\n\n var el = this.element;\n var customClasses = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipClass) || null; // Reset the tooltip element so it can be re-used.\n\n this.elmTooltip.innerHTML = '';\n this.elmTooltip.style.display = 'none';\n\n if (customClasses) {\n var _this$elmTooltip$clas2;\n\n (_this$elmTooltip$clas2 = this.elmTooltip.classList).remove.apply(_this$elmTooltip$clas2, _toConsumableArray(customClasses.split(' ')));\n } // remove the popper.\n\n\n this.popper && this.popper.destroy();\n }\n});\n\n//# sourceURL=webpack:///./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var wicked_elements__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! wicked-elements */ \"./node_modules/wicked-elements/esm/index.js\");\n/* harmony import */ var _popperjs_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @popperjs/core */ \"./node_modules/@popperjs/core/lib/index.js\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles.css */ \"./src/styles.css\");\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_styles_css__WEBPACK_IMPORTED_MODULE_2__);\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n\n\n\nvar ID_TOOLTIP = '#pep-tooltips';\n/**\n * Upgrades elements with the `tooltip` attribute to enable tooltips.\n * Positions the tooltip wrapper element\n * and replaces the content with the value from the attribute.\n */\n\nObject(wicked_elements__WEBPACK_IMPORTED_MODULE_0__[\"define\"])('[tooltip]', {\n get elmTooltip() {\n var elm = document.querySelector(ID_TOOLTIP);\n\n if (!elm) {\n throw new Error(\"Could not find the element \".concat(ID_TOOLTIP, \".\\nThis element is required for tooltips.\"));\n }\n\n return elm;\n },\n\n onMouseenter: function onMouseenter() {\n var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4;\n\n var el = this.element;\n var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement\n\n var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1\n\n var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1\n\n var customClasses = ((_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4.tooltipClass) || null;\n var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text\n\n if (body === '' || !body) {\n return;\n } // Replace the content in the element with the text value from the attribute.\n\n\n this.elmTooltip.innerHTML = body; // Apply custom class\n\n if (customClasses) {\n var _this$elmTooltip$clas;\n\n (_this$elmTooltip$clas = this.elmTooltip.classList).add.apply(_this$elmTooltip$clas, _toConsumableArray(customClasses.split(' ')));\n } // Create a popper to manage the element's position.\n\n\n this.popper = Object(_popperjs_core__WEBPACK_IMPORTED_MODULE_1__[\"createPopper\"])(this.element, this.elmTooltip, {\n placement: placement,\n modifiers: [{\n name: 'offset',\n options: {\n offset: [offsetSkidding, offsetDistance]\n }\n }]\n }); // Show the tooltip element.\n\n this.elmTooltip.style.display = 'inherit';\n },\n onMouseleave: function onMouseleave() {\n var _el$dataset5;\n\n var el = this.element;\n var customClasses = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipClass) || null; // Reset the tooltip element so it can be re-used.\n\n this.elmTooltip.innerHTML = '';\n this.elmTooltip.style.display = 'none';\n\n if (customClasses) {\n var _this$elmTooltip$clas2;\n\n (_this$elmTooltip$clas2 = this.elmTooltip.classList).remove.apply(_this$elmTooltip$clas2, _toConsumableArray(customClasses.split(' ')));\n } // remove the popper.\n\n\n this.popper && this.popper.destroy();\n },\n onFocusOut: function onFocusOut() {\n // Close the tooltip when the element loses focus.\n // This happens when React updates the element.\n this.onMouseleave();\n }\n});\n\n//# sourceURL=webpack:///./src/index.js?"); /***/ }), diff --git a/esm/index.js b/esm/index.js index 78d34ce..92f2a7c 100644 --- a/esm/index.js +++ b/esm/index.js @@ -67,4 +67,9 @@ define('[tooltip]', { // remove the popper. this.popper && this.popper.destroy(); }, + onFocusOut: function onFocusOut() { + // Close the tooltip when the element loses focus. + // This happens when React updates the element. + this.onMouseleave(); + }, }); diff --git a/index.js b/index.js deleted file mode 100644 index 9db548b..0000000 --- a/index.js +++ /dev/null @@ -1,70 +0,0 @@ -(function () { - 'use strict'; - - var _require = require('wicked-elements'), - define = _require.define; - - var _require2 = require('@popperjs/core'), - createPopper = _require2.createPopper; - - require('./styles.css'); - - var ID_TOOLTIP = '#tooltip'; - /** - * Upgrades elements with the `tooltip` attribute to enable tooltips. - * Positions the tooltip wrapper element - * and replaces the content with the value from the attribute. - */ - - define('[tooltip]', { - get elmTooltip() { - var elm = document.querySelector(ID_TOOLTIP); - - if (!elm) { - throw new Error("Could not find the element ".concat(ID_TOOLTIP, ".\nThis element is required for tooltips.")); - } - - return elm; - }, - - onMouseenter: function onMouseenter() { - var _el$dataset, _el$dataset2, _el$dataset3; - - var el = this.element; - var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement - - var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1 - - var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1 - - var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text - - if (body === '') { - return; - } // Replace the content in the element with the text value from the attribute. - - - this.elmTooltip.innerHTML = body; // Create a popper to manage the element's position. - - this.popper = createPopper(this.element, this.elmTooltip, { - placement: placement, - modifiers: [{ - name: 'offset', - options: { - offset: [offsetSkidding, offsetDistance] - } - }] - }); // Show the tooltip element. - - this.elmTooltip.style.display = 'inherit'; - }, - onMouseleave: function onMouseleave() { - // Reset the tooltip element so it can be re-used. - this.elmTooltip.innerHTML = ''; - this.elmTooltip.style.display = 'none'; // remove the popper. - - this.popper && this.popper.destroy(); - } - }); - -}()); diff --git a/package-lock.json b/package-lock.json index 55789be..0428af0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "pep-tooltips", - "version": "1.0.0", + "version": "1.0.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a415c6c..75c6396 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pep-tooltips", - "version": "1.0.0", + "version": "1.0.5", "description": "Enable tooltips with an attribute", "main": "dist/index.babel.js", "dependencies": { diff --git a/src/index.js b/src/index.js index 7aab3b7..9c9bc37 100644 --- a/src/index.js +++ b/src/index.js @@ -66,4 +66,9 @@ define('[tooltip]', { // remove the popper. this.popper && this.popper.destroy(); }, + onFocusOut: function onFocusOut() { + // Close the tooltip when the element loses focus. + // This happens when React updates the element. + this.onMouseleave(); + }, });