advanced-ellipsis - npm Package Compare versions

Comparing version 0.1.1 to 0.2.2

dist/advanced-ellipsis.esm.js

 var AdvancedEllipsis = /** @class */ (function () {
-    function AdvancedEllipsis(options) {
-        this.isStart = false;
-        this.nodes = [];
-        this.options = {
+    function AdvancedEllipsis(options, selector) {
+        var _this = this;
+        var _observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.attributeName === 'style')
+                    return;
+                if (mutation.target.childNodes.length === 1 && mutation.target.childNodes[0].nodeType === 3) {
+                    addSetting(mutation.target);
+                }
+            });
+        }.bind(this));
+        var _options = {
+            mutationObserver: true,
             defalutStyles: true,
             useCloneNode: false,
             showOption: 'static',
-            selector: '[data-ellipsis]',
             flowDelay: 1000,
@@ -16,9 +24,23 @@ flowAfterDelay: 1000,
             flowAutoCount: Infinity,
-            tooltipElementClass: 'ellipsis_tooltip_box',
+            flowCountPre: 0,
+            tooltipShowAlways: false,
+            tooltipClass: 'ellipsis_tooltip_box',
             tooltipDuration: 2000,
-            customTooltipStyle: {},
+            customTooltipStyles: {},
         };
-        this.defalutTooltipStyle = function (event) {
-            var X = event.type === "touchend" ? event.changedTouches[0].clientX : event.clientX;
-            var Y = event.type === "touchend" ? event.changedTouches[0].clientY : event.clientY;
+        var _elements = [];
+        var _isStart = false;
+        var objectOverwrite = function (obj1, obj2, propertyOverwrite) {
+            if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
+                return;
+            Object.keys(obj2).forEach(function (key) {
+                if (propertyOverwrite || Object.prototype.hasOwnProperty.call(obj1, key)) {
+                    obj1[key] = obj2[key];
+                }
+            });
+            return obj1;
+        };
+        var defalutTooltipStyles = function (event) {
+            var X = event.type === "touchstart" ? event.changedTouches[0].pageX : event.pageX;
+            var Y = event.type === "touchstart" ? event.changedTouches[0].pageY : event.pageY;
             var isLeft = X < window.innerWidth / 2;
@@ -34,3 +56,3 @@ var isTop = Y < window.innerHeight / 2;
                 border: '1px solid #000',
-                position: 'fixed',
+                position: 'absolute',
                 fontSize: '12px',
@@ -43,121 +65,162 @@ left: isLeft ? Math.floor(X + boxGap) + 'px' : 'unset',
         };
-        if (typeof options === 'string') {
-            this.setElements(options);
-        }
-        else {
-            this.setOptions(options || {});
-        }
-    }
-    AdvancedEllipsis.prototype.objectOverwrite = function (obj1, obj2) {
-        if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
-            return;
-        Object.keys(obj2).forEach(function (key) {
-            if (obj1.hasOwnProperty(key)) {
-                obj1[key] = obj2[key];
+        var checkEllipsis = function (element, useCloneNode) {
+            if (useCloneNode) {
+                var contrast = element.cloneNode(true);
+                contrast.style.display = 'inline';
+                contrast.style.width = 'auto';
+                contrast.style.visibility = 'hidden';
+                element.parentNode.appendChild(contrast);
+                var res = contrast.offsetWidth > element.offsetWidth ? contrast.offsetWidth - element.offsetWidth : 0;
+                element.parentNode.removeChild(contrast);
+                return res;
             }
-        });
-    };
-    AdvancedEllipsis.prototype.start = function () {
-        if (this.nodes.length) {
-            this.nodes.forEach(this.addSetting.bind(this));
-            this.isStart = true;
-        }
-    };
-    AdvancedEllipsis.prototype.destroy = function () {
-        if (!this.isStart)
-            return;
-        if (this.nodes.length) {
-            this.nodes.forEach(this.removeSetting.bind(this));
-            this.nodes = [];
-            this.isStart = false;
-        }
-    };
-    AdvancedEllipsis.prototype.setElements = function (selector) {
-        var _this = this;
-        this.destroy();
-        this.options.selector = selector;
-        var elements = document.querySelectorAll(selector);
-        elements.forEach(function (element) {
-            var node = {
-                element: element,
-                eventOn: false,
-                timer: null,
-                listener: null,
-                beforeDefalutStyles: {
-                    textOverflow: element.style.textOverflow,
-                    overflow: element.style.overflow,
-                    whiteSpace: element.style.whiteSpace
+            return element.scrollWidth > element.offsetWidth ? element.scrollWidth - element.offsetWidth : 0;
+        };
+        var flowAnitate = function (element, length, repeatCount) {
+            var e_option = element['ellipsisOption'];
+            var this_options = _this.getOptions();
+            length = length + this_options.flowPadding;
+            var start = null;
+            var duration = length / this_options.flowSpeed * 1000;
+            var delay = this_options.flowDelay;
+            var afterDelay = this_options.flowAfterDelay;
+            element.style.textOverflow = 'clip';
+            e_option.eventOn = true;
+            var flowAnitate = function (timestamp) {
+                if (!e_option.eventOn) {
+                    element.style.transition = 'none';
+                    element.style.textIndent = '0';
+                    return;
                 }
+                if (!start)
+                    start = timestamp;
+                var timediff = timestamp - start;
+                if (repeatCount > 0) {
+                    var newTransition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
+                    if (newTransition !== element.style.transition) {
+                        element.style.transition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
+                        element.style.textIndent = '-' + length + 'px';
+                    }
+                    if (timediff >= delay + duration + afterDelay) {
+                        repeatCount--;
+                        element.style.transition = 'none';
+                        element.style.textIndent = '0';
+                        start = timestamp;
+                        window.requestAnimationFrame(flowAnitate);
+                    }
+                    else {
+                        window.requestAnimationFrame(flowAnitate);
+                    }
+                }
+                else {
+                    element.style.textOverflow = 'ellipsis';
+                    e_option.eventOn = false;
+                }
             };
-            _this.nodes.push(node);
-        });
-    };
-    AdvancedEllipsis.prototype.addElements = function (selector) {
-        this.options.selector += ", " + selector;
-        var elements = document.querySelectorAll(selector);
-        var nodes = this.nodes;
-        elements.forEach(function (element) {
-            if (nodes.some(function (node) { return element === node.element; }))
-                return; // 중복 제거
-            var node = {
-                element: element,
-                eventOn: false,
-                timer: null,
-                listener: null,
-                beforeDefalutStyles: {
-                    textOverflow: element.style.textOverflow,
-                    overflow: element.style.overflow,
-                    whiteSpace: element.style.whiteSpace
+            window.requestAnimationFrame(flowAnitate);
+        };
+        var flowListener = function (element, length) {
+            var e_option = element['ellipsisOption'];
+            var count = element.dataset.flowCount ? parseFloat(element.dataset.flowCount) : _this.getOption('flowCount');
+            return function () {
+                if (!e_option.eventOn) {
+                    flowAnitate(element, length, count);
                 }
             };
-            nodes.push(node);
-        });
-    };
-    AdvancedEllipsis.prototype.getElements = function () {
-        return this.nodes.map(function (node) { return node.element; });
-    };
-    AdvancedEllipsis.prototype.setOptions = function (options) {
-        this.objectOverwrite(this.options, options);
-        this.setElements(this.options.selector);
-    };
-    AdvancedEllipsis.prototype.addSetting = function (node) {
-        if (node.listener)
-            return;
-        var styles = node.element.style;
-        var data = node.element.dataset;
-        if (this.options.defalutStyles) {
-            styles.textOverflow = 'ellipsis';
-            styles.overflow = 'hidden';
-            styles.whiteSpace = 'nowrap';
-        }
-        var showOption = data.hasOwnProperty('ellipsisShowOption') ? data.ellipsisShowOption : (this.options.showOption || 'static');
-        var lengthDiff = this.options.useCloneNode ? this.checkEllipsisUseCloneNode(node.element) : this.checkEllipsis(node.element);
-        if (lengthDiff) {
-            node.element.dispatchEvent(new CustomEvent("addSetting", {
-                bubbles: true,
-                detail: {
-                    element: node.element,
-                    ellipsised: Boolean(lengthDiff),
-                    lengthDiff: lengthDiff,
-                    showOption: showOption,
+        };
+        var tooltipListener = function (element) {
+            var _a;
+            var e_option = element['ellipsisOption'];
+            var this_options = _this.getOptions();
+            var floatElement = document.createElement("div");
+            if (element.dataset.tooltipId) {
+                floatElement.id = element.dataset.tooltipId;
+            }
+            var tooltipClass = element.dataset.tooltipClass || this_options.tooltipClass;
+            if (tooltipClass) {
+                (_a = floatElement.classList).add.apply(_a, tooltipClass.split(' '));
+            }
+            return function (event) {
+                if (!e_option.eventOn) {
+                    floatElement.innerText = element.innerText;
+                    objectOverwrite(floatElement.style, defalutTooltipStyles(event));
+                    objectOverwrite(floatElement.style, this_options.customTooltipStyles);
+                    document.body.appendChild(floatElement);
+                    e_option.eventOn = true;
+                    e_option.timer = setTimeout(function () {
+                        document.body.removeChild(floatElement);
+                        clearTimeout(e_option.timer);
+                        e_option.eventOn = false;
+                    }.bind(_this), this_options.tooltipDuration);
                 }
-            }));
-            switch (showOption) {
+                else {
+                    objectOverwrite(floatElement.style, defalutTooltipStyles(event));
+                    objectOverwrite(floatElement.style, this_options.customTooltipStyles);
+                    clearTimeout(e_option.timer);
+                    e_option.timer = setTimeout(function () {
+                        document.body.removeChild(floatElement);
+                        clearTimeout(e_option.timer);
+                        e_option.eventOn = false;
+                    }.bind(_this), this_options.tooltipDuration);
+                }
+            };
+        };
+        var addSetting = function (element) {
+            var e_option = element['ellipsisOption'];
+            var this_options = _this.getOptions();
+            if (e_option.showOption)
+                removeSetting(element);
+            if (this_options.defalutStyles) {
+                objectOverwrite(element.style, {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                });
+            }
+            if (this_options.mutationObserver)
+                _observer.observe(element, { childList: true, attributes: true });
+            e_option.showOption = Object.prototype.hasOwnProperty.call(element.dataset, 'showOption') ? element.dataset.showOption : (this_options.showOption || 'static');
+            var lengthDiff = checkEllipsis(element, this_options.useCloneNode);
+            if (lengthDiff) {
+                var count = 0;
+                switch (e_option.showOption) {
+                    case 'flow':
+                        e_option.listener = flowListener(element, lengthDiff);
+                        element.addEventListener('mouseover', e_option.listener);
+                        element.addEventListener('touchstart', e_option.listener, { passive: true });
+                        if ((count = this_options.flowCountPre || parseFloat(element.dataset.flowCountPre))) {
+                            flowAnitate(element, lengthDiff, count);
+                        }
+                        break;
+                    case 'flow-auto':
+                        count = parseFloat(element.dataset.flowCount) || this_options.flowAutoCount || Infinity;
+                        flowAnitate(element, lengthDiff, count);
+                        break;
+                    case 'tooltip':
+                        e_option.listener = tooltipListener(element);
+                        element.addEventListener('mouseover', e_option.listener);
+                        element.addEventListener('touchstart', e_option.listener, { passive: true });
+                        break;
+                    default:
+                        break;
+                }
+            }
+            else if ((element.dataset.tooltipShowAlways || this_options.tooltipShowAlways) && e_option.showOption === 'tooltip') {
+                e_option.listener = tooltipListener(element);
+                element.addEventListener('mouseover', e_option.listener);
+                element.addEventListener('touchstart', e_option.listener, { passive: true });
+            }
+        };
+        var removeSetting = function (element) {
+            var e_option = element['ellipsisOption'];
+            switch (e_option.showOption) {
                 case 'flow':
-                    var flow_listener = this.flowListener(node, lengthDiff);
-                    node.listener = flow_listener;
-                    node.element.addEventListener('mouseover', node.listener);
+                    element.removeEventListener('mouseover', e_option.listener);
+                    element.removeEventListener('touchstart', e_option.listener);
                     break;
                 case 'flow-auto':
-                    var count = parseFloat(node.element.dataset.ellipsisFlowCount) || this.options.flowAutoCount || Infinity;
-                    this.flowAnitate(node, lengthDiff, count);
                     break;
-                case 'title':
-                    this.titleText(node);
-                    break;
                 case 'tooltip':
-                    var tooltip_listener = this.tooltipListener(node);
-                    node.listener = tooltip_listener;
-                    node.element.addEventListener('mouseover', node.listener);
-                    node.element.addEventListener('touchend', node.listener);
+                    element.removeEventListener('mouseover', e_option.listener);
+                    element.removeEventListener('touchstart', e_option.listener);
                     break;
@@ -167,143 +230,83 @@ default:
             }
-        }
-    };
-    AdvancedEllipsis.prototype.removeSetting = function (node) {
-        var styles = node.element.style;
-        var data = node.element.dataset;
-        var showOption = data.hasOwnProperty('ellipsisShowOption') ? data.ellipsisShowOption : this.options.showOption;
-        node.element.dispatchEvent(new CustomEvent("addSetting", {
-            bubbles: true,
-            detail: {
-                element: node.element,
-                showOption: showOption,
-            }
-        }));
-        switch (showOption) {
-            case 'flow':
-                node.element.removeEventListener('mouseover', node.listener);
-                break;
-            case 'flow-auto':
-                break;
-            case 'title':
-                node.element.title = '';
-                break;
-            case 'tooltip':
-                node.element.removeEventListener('mouseover', node.listener);
-                node.element.removeEventListener('touchend', node.listener);
-                break;
-            default:
-                break;
-        }
-        node.listener = null;
-        node.eventOn = false;
-        if (this.options.defalutStyles) {
-            styles.textOverflow = node.beforeDefalutStyles.textOverflow;
-            styles.overflow = node.beforeDefalutStyles.overflow;
-            styles.whiteSpace = node.beforeDefalutStyles.whiteSpace;
-        }
-    };
-    AdvancedEllipsis.prototype.checkEllipsis = function (element) {
-        return element.scrollWidth > element.offsetWidth ? element.scrollWidth - element.offsetWidth : 0;
-    };
-    AdvancedEllipsis.prototype.checkEllipsisUseCloneNode = function (element) {
-        var contrast = element.cloneNode(true);
-        contrast.style.display = 'inline';
-        contrast.style.width = 'auto';
-        contrast.style.visibility = 'hidden';
-        element.parentNode.appendChild(contrast);
-        var res = contrast.offsetWidth > element.offsetWidth ? contrast.offsetWidth - element.offsetWidth : 0;
-        element.parentNode.removeChild(contrast);
-        return res;
-    };
-    AdvancedEllipsis.prototype.flowListener = function (node, length) {
-        var _this = this;
-        var count = parseFloat(node.element.dataset.ellipsisFlowCount);
-        var listener = function () {
-            if (!node.eventOn) {
-                _this.flowAnitate(node, length, count);
-            }
+            objectOverwrite(e_option, {
+                showOption: '',
+                eventOn: false,
+                timer: null,
+                listener: null,
+            });
+            objectOverwrite(element.style, e_option.originalElement.style);
         };
-        return listener;
-    };
-    AdvancedEllipsis.prototype.flowAnitate = function (node, length, repeatCount) {
-        length = length + this.options.flowPadding;
-        var start = null;
-        var duration = length / this.options.flowSpeed * 1000;
-        var delay = this.options.flowDelay;
-        var afterDelay = this.options.flowAfterDelay;
-        node.element.style.textOverflow = 'clip';
-        node.eventOn = true;
-        var flowAnitate = function (timestamp) {
-            if (!node.eventOn) {
-                node.element.style.transition = 'none';
-                node.element.style.textIndent = '0';
+        this.setElements = function (selector) {
+            if (!selector)
                 return;
-            }
-            if (!start)
-                start = timestamp;
-            var timediff = timestamp - start;
-            if (repeatCount > 0) {
-                var newTransition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
-                if (newTransition !== node.element.style.transition) {
-                    node.element.style.transition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
-                    node.element.style.textIndent = '-' + length + 'px';
+            _this.destroy();
+            var elements = document.querySelectorAll(selector);
+            _elements.length = 0;
+            elements.forEach(function (element) {
+                if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+                    var ellipsisOption = {
+                        originalElement: element.cloneNode(true),
+                        showOption: '',
+                        eventOn: false,
+                        timer: null,
+                        listener: null,
+                    };
+                    element['ellipsisOption'] = ellipsisOption;
+                    _elements.push(element);
                 }
-                if (timediff >= delay + duration + afterDelay) {
-                    repeatCount--;
-                    node.element.style.transition = 'none';
-                    node.element.style.textIndent = '0';
-                    start = timestamp;
-                    window.requestAnimationFrame(flowAnitate);
-                }
-                else {
-                    window.requestAnimationFrame(flowAnitate);
-                }
+            });
+            return _this;
+        };
+        this.getElements = function () { return objectOverwrite([], _elements, true); };
+        this.setOptions = function (options) {
+            var before = JSON.stringify(_options);
+            objectOverwrite(_options, options);
+            if (before !== JSON.stringify(_options)) {
+                _this.restart();
             }
-            else {
-                node.element.style.textOverflow = 'ellipsis';
-                node.eventOn = false;
+            return _this;
+        };
+        this.getOptions = function () { return objectOverwrite({}, _options, true); };
+        this.getOption = function (key) { return _options[key]; };
+        this.getStatus = function () { return _isStart; };
+        this.start = function () {
+            var elements = _this.getElements();
+            if (elements.length) {
+                elements.forEach(addSetting.bind(_this));
+                _isStart = true;
             }
+            return _this;
         };
-        window.requestAnimationFrame(flowAnitate);
-    };
-    AdvancedEllipsis.prototype.tooltipListener = function (node) {
-        var _a;
-        var _this = this;
-        var floatElement = document.createElement("div");
-        floatElement.id = node.element.dataset.tooltipElementId;
-        var newClass = node.element.dataset.tooltipElementClass || this.options.tooltipElementClass;
-        if (newClass) {
-            (_a = floatElement.classList).add.apply(_a, newClass.split(' '));
-        }
-        var listener = function (event) {
-            if (!node.eventOn) {
-                floatElement.innerText = node.element.innerText;
-                _this.objectOverwrite(floatElement.style, _this.defalutTooltipStyle(event));
-                _this.objectOverwrite(floatElement.style, _this.options.customTooltipStyle);
-                document.body.appendChild(floatElement);
-                node.eventOn = true;
-                node.timer = setTimeout(function () {
-                    document.body.removeChild(floatElement);
-                    clearTimeout(node.timer);
-                    node.eventOn = false;
-                }.bind(_this), _this.options.tooltipDuration);
+        this.destroy = function () {
+            var elements = _this.getElements();
+            if (elements.length) {
+                _observer.disconnect();
+                elements.forEach(removeSetting.bind(_this));
+                _isStart = false;
             }
-            else {
-                _this.objectOverwrite(floatElement.style, _this.defalutTooltipStyle(event));
-                _this.objectOverwrite(floatElement.style, _this.options.customTooltipStyle);
-                clearTimeout(node.timer);
-                node.timer = setTimeout(function () {
-                    document.body.removeChild(floatElement);
-                    clearTimeout(node.timer);
-                    node.eventOn = false;
-                }.bind(_this), _this.options.tooltipDuration);
+            return _this;
+        };
+        this.restart = function () {
+            var elements = _this.getElements();
+            if (_isStart && elements.length) {
+                _observer.disconnect();
+                elements.forEach(removeSetting.bind(_this));
+                elements.forEach(addSetting.bind(_this));
             }
+            return _this;
         };
-        return listener;
-    };
-    AdvancedEllipsis.prototype.titleText = function (node) {
-        node.element.title = node.element.innerText;
-    };
+        this.setElements('[data-ellipsis]');
+        if (typeof options === 'string') {
+            this.setElements(options);
+        }
+        else if (typeof options === 'object') {
+            this.setOptions(options);
+            if (typeof selector === 'string') {
+                this.setElements(selector);
+            }
+        }
+        Object.freeze(this);
+    }
     return AdvancedEllipsis;
 }());
 export default AdvancedEllipsis;

dist/advanced-ellipsis.js

 var AdvancedEllipsis = /** @class */ (function () {
-    function AdvancedEllipsis(options) {
-        this.isStart = false;
-        this.nodes = [];
-        this.options = {
+    function AdvancedEllipsis(options, selector) {
+        var _this = this;
+        var _observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.attributeName === 'style')
+                    return;
+                if (mutation.target.childNodes.length === 1 && mutation.target.childNodes[0].nodeType === 3) {
+                    addSetting(mutation.target);
+                }
+            });
+        }.bind(this));
+        var _options = {
+            mutationObserver: true,
             defalutStyles: true,
             useCloneNode: false,
             showOption: 'static',
-            selector: '[data-ellipsis]',
             flowDelay: 1000,
@@ -16,9 +24,23 @@ flowAfterDelay: 1000,
             flowAutoCount: Infinity,
-            tooltipElementClass: 'ellipsis_tooltip_box',
+            flowCountPre: 0,
+            tooltipShowAlways: false,
+            tooltipClass: 'ellipsis_tooltip_box',
             tooltipDuration: 2000,
-            customTooltipStyle: {},
+            customTooltipStyles: {},
         };
-        this.defalutTooltipStyle = function (event) {
-            var X = event.type === "touchend" ? event.changedTouches[0].clientX : event.clientX;
-            var Y = event.type === "touchend" ? event.changedTouches[0].clientY : event.clientY;
+        var _elements = [];
+        var _isStart = false;
+        var objectOverwrite = function (obj1, obj2, propertyOverwrite) {
+            if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
+                return;
+            Object.keys(obj2).forEach(function (key) {
+                if (propertyOverwrite || Object.prototype.hasOwnProperty.call(obj1, key)) {
+                    obj1[key] = obj2[key];
+                }
+            });
+            return obj1;
+        };
+        var defalutTooltipStyles = function (event) {
+            var X = event.type === "touchstart" ? event.changedTouches[0].pageX : event.pageX;
+            var Y = event.type === "touchstart" ? event.changedTouches[0].pageY : event.pageY;
             var isLeft = X < window.innerWidth / 2;
@@ -34,3 +56,3 @@ var isTop = Y < window.innerHeight / 2;
                 border: '1px solid #000',
-                position: 'fixed',
+                position: 'absolute',
                 fontSize: '12px',
@@ -43,121 +65,162 @@ left: isLeft ? Math.floor(X + boxGap) + 'px' : 'unset',
         };
-        if (typeof options === 'string') {
-            this.setElements(options);
-        }
-        else {
-            this.setOptions(options || {});
-        }
-    }
-    AdvancedEllipsis.prototype.objectOverwrite = function (obj1, obj2) {
-        if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
-            return;
-        Object.keys(obj2).forEach(function (key) {
-            if (obj1.hasOwnProperty(key)) {
-                obj1[key] = obj2[key];
+        var checkEllipsis = function (element, useCloneNode) {
+            if (useCloneNode) {
+                var contrast = element.cloneNode(true);
+                contrast.style.display = 'inline';
+                contrast.style.width = 'auto';
+                contrast.style.visibility = 'hidden';
+                element.parentNode.appendChild(contrast);
+                var res = contrast.offsetWidth > element.offsetWidth ? contrast.offsetWidth - element.offsetWidth : 0;
+                element.parentNode.removeChild(contrast);
+                return res;
             }
-        });
-    };
-    AdvancedEllipsis.prototype.start = function () {
-        if (this.nodes.length) {
-            this.nodes.forEach(this.addSetting.bind(this));
-            this.isStart = true;
-        }
-    };
-    AdvancedEllipsis.prototype.destroy = function () {
-        if (!this.isStart)
-            return;
-        if (this.nodes.length) {
-            this.nodes.forEach(this.removeSetting.bind(this));
-            this.nodes = [];
-            this.isStart = false;
-        }
-    };
-    AdvancedEllipsis.prototype.setElements = function (selector) {
-        var _this = this;
-        this.destroy();
-        this.options.selector = selector;
-        var elements = document.querySelectorAll(selector);
-        elements.forEach(function (element) {
-            var node = {
-                element: element,
-                eventOn: false,
-                timer: null,
-                listener: null,
-                beforeDefalutStyles: {
-                    textOverflow: element.style.textOverflow,
-                    overflow: element.style.overflow,
-                    whiteSpace: element.style.whiteSpace
+            return element.scrollWidth > element.offsetWidth ? element.scrollWidth - element.offsetWidth : 0;
+        };
+        var flowAnitate = function (element, length, repeatCount) {
+            var e_option = element['ellipsisOption'];
+            var this_options = _this.getOptions();
+            length = length + this_options.flowPadding;
+            var start = null;
+            var duration = length / this_options.flowSpeed * 1000;
+            var delay = this_options.flowDelay;
+            var afterDelay = this_options.flowAfterDelay;
+            element.style.textOverflow = 'clip';
+            e_option.eventOn = true;
+            var flowAnitate = function (timestamp) {
+                if (!e_option.eventOn) {
+                    element.style.transition = 'none';
+                    element.style.textIndent = '0';
+                    return;
                 }
+                if (!start)
+                    start = timestamp;
+                var timediff = timestamp - start;
+                if (repeatCount > 0) {
+                    var newTransition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
+                    if (newTransition !== element.style.transition) {
+                        element.style.transition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
+                        element.style.textIndent = '-' + length + 'px';
+                    }
+                    if (timediff >= delay + duration + afterDelay) {
+                        repeatCount--;
+                        element.style.transition = 'none';
+                        element.style.textIndent = '0';
+                        start = timestamp;
+                        window.requestAnimationFrame(flowAnitate);
+                    }
+                    else {
+                        window.requestAnimationFrame(flowAnitate);
+                    }
+                }
+                else {
+                    element.style.textOverflow = 'ellipsis';
+                    e_option.eventOn = false;
+                }
             };
-            _this.nodes.push(node);
-        });
-    };
-    AdvancedEllipsis.prototype.addElements = function (selector) {
-        this.options.selector += ", " + selector;
-        var elements = document.querySelectorAll(selector);
-        var nodes = this.nodes;
-        elements.forEach(function (element) {
-            if (nodes.some(function (node) { return element === node.element; }))
-                return; // 중복 제거
-            var node = {
-                element: element,
-                eventOn: false,
-                timer: null,
-                listener: null,
-                beforeDefalutStyles: {
-                    textOverflow: element.style.textOverflow,
-                    overflow: element.style.overflow,
-                    whiteSpace: element.style.whiteSpace
+            window.requestAnimationFrame(flowAnitate);
+        };
+        var flowListener = function (element, length) {
+            var e_option = element['ellipsisOption'];
+            var count = element.dataset.flowCount ? parseFloat(element.dataset.flowCount) : _this.getOption('flowCount');
+            return function () {
+                if (!e_option.eventOn) {
+                    flowAnitate(element, length, count);
                 }
             };
-            nodes.push(node);
-        });
-    };
-    AdvancedEllipsis.prototype.getElements = function () {
-        return this.nodes.map(function (node) { return node.element; });
-    };
-    AdvancedEllipsis.prototype.setOptions = function (options) {
-        this.objectOverwrite(this.options, options);
-        this.setElements(this.options.selector);
-    };
-    AdvancedEllipsis.prototype.addSetting = function (node) {
-        if (node.listener)
-            return;
-        var styles = node.element.style;
-        var data = node.element.dataset;
-        if (this.options.defalutStyles) {
-            styles.textOverflow = 'ellipsis';
-            styles.overflow = 'hidden';
-            styles.whiteSpace = 'nowrap';
-        }
-        var showOption = data.hasOwnProperty('ellipsisShowOption') ? data.ellipsisShowOption : (this.options.showOption || 'static');
-        var lengthDiff = this.options.useCloneNode ? this.checkEllipsisUseCloneNode(node.element) : this.checkEllipsis(node.element);
-        if (lengthDiff) {
-            node.element.dispatchEvent(new CustomEvent("addSetting", {
-                bubbles: true,
-                detail: {
-                    element: node.element,
-                    ellipsised: Boolean(lengthDiff),
-                    lengthDiff: lengthDiff,
-                    showOption: showOption,
+        };
+        var tooltipListener = function (element) {
+            var _a;
+            var e_option = element['ellipsisOption'];
+            var this_options = _this.getOptions();
+            var floatElement = document.createElement("div");
+            if (element.dataset.tooltipId) {
+                floatElement.id = element.dataset.tooltipId;
+            }
+            var tooltipClass = element.dataset.tooltipClass || this_options.tooltipClass;
+            if (tooltipClass) {
+                (_a = floatElement.classList).add.apply(_a, tooltipClass.split(' '));
+            }
+            return function (event) {
+                if (!e_option.eventOn) {
+                    floatElement.innerText = element.innerText;
+                    objectOverwrite(floatElement.style, defalutTooltipStyles(event));
+                    objectOverwrite(floatElement.style, this_options.customTooltipStyles);
+                    document.body.appendChild(floatElement);
+                    e_option.eventOn = true;
+                    e_option.timer = setTimeout(function () {
+                        document.body.removeChild(floatElement);
+                        clearTimeout(e_option.timer);
+                        e_option.eventOn = false;
+                    }.bind(_this), this_options.tooltipDuration);
                 }
-            }));
-            switch (showOption) {
+                else {
+                    objectOverwrite(floatElement.style, defalutTooltipStyles(event));
+                    objectOverwrite(floatElement.style, this_options.customTooltipStyles);
+                    clearTimeout(e_option.timer);
+                    e_option.timer = setTimeout(function () {
+                        document.body.removeChild(floatElement);
+                        clearTimeout(e_option.timer);
+                        e_option.eventOn = false;
+                    }.bind(_this), this_options.tooltipDuration);
+                }
+            };
+        };
+        var addSetting = function (element) {
+            var e_option = element['ellipsisOption'];
+            var this_options = _this.getOptions();
+            if (e_option.showOption)
+                removeSetting(element);
+            if (this_options.defalutStyles) {
+                objectOverwrite(element.style, {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                });
+            }
+            if (this_options.mutationObserver)
+                _observer.observe(element, { childList: true, attributes: true });
+            e_option.showOption = Object.prototype.hasOwnProperty.call(element.dataset, 'showOption') ? element.dataset.showOption : (this_options.showOption || 'static');
+            var lengthDiff = checkEllipsis(element, this_options.useCloneNode);
+            if (lengthDiff) {
+                var count = 0;
+                switch (e_option.showOption) {
+                    case 'flow':
+                        e_option.listener = flowListener(element, lengthDiff);
+                        element.addEventListener('mouseover', e_option.listener);
+                        element.addEventListener('touchstart', e_option.listener, { passive: true });
+                        if ((count = this_options.flowCountPre || parseFloat(element.dataset.flowCountPre))) {
+                            flowAnitate(element, lengthDiff, count);
+                        }
+                        break;
+                    case 'flow-auto':
+                        count = parseFloat(element.dataset.flowCount) || this_options.flowAutoCount || Infinity;
+                        flowAnitate(element, lengthDiff, count);
+                        break;
+                    case 'tooltip':
+                        e_option.listener = tooltipListener(element);
+                        element.addEventListener('mouseover', e_option.listener);
+                        element.addEventListener('touchstart', e_option.listener, { passive: true });
+                        break;
+                    default:
+                        break;
+                }
+            }
+            else if ((element.dataset.tooltipShowAlways || this_options.tooltipShowAlways) && e_option.showOption === 'tooltip') {
+                e_option.listener = tooltipListener(element);
+                element.addEventListener('mouseover', e_option.listener);
+                element.addEventListener('touchstart', e_option.listener, { passive: true });
+            }
+        };
+        var removeSetting = function (element) {
+            var e_option = element['ellipsisOption'];
+            switch (e_option.showOption) {
                 case 'flow':
-                    var flow_listener = this.flowListener(node, lengthDiff);
-                    node.listener = flow_listener;
-                    node.element.addEventListener('mouseover', node.listener);
+                    element.removeEventListener('mouseover', e_option.listener);
+                    element.removeEventListener('touchstart', e_option.listener);
                     break;
                 case 'flow-auto':
-                    var count = parseFloat(node.element.dataset.ellipsisFlowCount) || this.options.flowAutoCount || Infinity;
-                    this.flowAnitate(node, lengthDiff, count);
                     break;
-                case 'title':
-                    this.titleText(node);
-                    break;
                 case 'tooltip':
-                    var tooltip_listener = this.tooltipListener(node);
-                    node.listener = tooltip_listener;
-                    node.element.addEventListener('mouseover', node.listener);
-                    node.element.addEventListener('touchend', node.listener);
+                    element.removeEventListener('mouseover', e_option.listener);
+                    element.removeEventListener('touchstart', e_option.listener);
                     break;
@@ -167,142 +230,82 @@ default:
             }
-        }
-    };
-    AdvancedEllipsis.prototype.removeSetting = function (node) {
-        var styles = node.element.style;
-        var data = node.element.dataset;
-        var showOption = data.hasOwnProperty('ellipsisShowOption') ? data.ellipsisShowOption : this.options.showOption;
-        node.element.dispatchEvent(new CustomEvent("addSetting", {
-            bubbles: true,
-            detail: {
-                element: node.element,
-                showOption: showOption,
-            }
-        }));
-        switch (showOption) {
-            case 'flow':
-                node.element.removeEventListener('mouseover', node.listener);
-                break;
-            case 'flow-auto':
-                break;
-            case 'title':
-                node.element.title = '';
-                break;
-            case 'tooltip':
-                node.element.removeEventListener('mouseover', node.listener);
-                node.element.removeEventListener('touchend', node.listener);
-                break;
-            default:
-                break;
-        }
-        node.listener = null;
-        node.eventOn = false;
-        if (this.options.defalutStyles) {
-            styles.textOverflow = node.beforeDefalutStyles.textOverflow;
-            styles.overflow = node.beforeDefalutStyles.overflow;
-            styles.whiteSpace = node.beforeDefalutStyles.whiteSpace;
-        }
-    };
-    AdvancedEllipsis.prototype.checkEllipsis = function (element) {
-        return element.scrollWidth > element.offsetWidth ? element.scrollWidth - element.offsetWidth : 0;
-    };
-    AdvancedEllipsis.prototype.checkEllipsisUseCloneNode = function (element) {
-        var contrast = element.cloneNode(true);
-        contrast.style.display = 'inline';
-        contrast.style.width = 'auto';
-        contrast.style.visibility = 'hidden';
-        element.parentNode.appendChild(contrast);
-        var res = contrast.offsetWidth > element.offsetWidth ? contrast.offsetWidth - element.offsetWidth : 0;
-        element.parentNode.removeChild(contrast);
-        return res;
-    };
-    AdvancedEllipsis.prototype.flowListener = function (node, length) {
-        var _this = this;
-        var count = parseFloat(node.element.dataset.ellipsisFlowCount);
-        var listener = function () {
-            if (!node.eventOn) {
-                _this.flowAnitate(node, length, count);
-            }
+            objectOverwrite(e_option, {
+                showOption: '',
+                eventOn: false,
+                timer: null,
+                listener: null,
+            });
+            objectOverwrite(element.style, e_option.originalElement.style);
         };
-        return listener;
-    };
-    AdvancedEllipsis.prototype.flowAnitate = function (node, length, repeatCount) {
-        length = length + this.options.flowPadding;
-        var start = null;
-        var duration = length / this.options.flowSpeed * 1000;
-        var delay = this.options.flowDelay;
-        var afterDelay = this.options.flowAfterDelay;
-        node.element.style.textOverflow = 'clip';
-        node.eventOn = true;
-        var flowAnitate = function (timestamp) {
-            if (!node.eventOn) {
-                node.element.style.transition = 'none';
-                node.element.style.textIndent = '0';
+        this.setElements = function (selector) {
+            if (!selector)
                 return;
-            }
-            if (!start)
-                start = timestamp;
-            var timediff = timestamp - start;
-            if (repeatCount > 0) {
-                var newTransition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
-                if (newTransition !== node.element.style.transition) {
-                    node.element.style.transition = 'text-indent ' + duration + 'ms ' + delay + 'ms linear';
-                    node.element.style.textIndent = '-' + length + 'px';
+            _this.destroy();
+            var elements = document.querySelectorAll(selector);
+            _elements.length = 0;
+            elements.forEach(function (element) {
+                if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+                    var ellipsisOption = {
+                        originalElement: element.cloneNode(true),
+                        showOption: '',
+                        eventOn: false,
+                        timer: null,
+                        listener: null,
+                    };
+                    element['ellipsisOption'] = ellipsisOption;
+                    _elements.push(element);
                 }
-                if (timediff >= delay + duration + afterDelay) {
-                    repeatCount--;
-                    node.element.style.transition = 'none';
-                    node.element.style.textIndent = '0';
-                    start = timestamp;
-                    window.requestAnimationFrame(flowAnitate);
-                }
-                else {
-                    window.requestAnimationFrame(flowAnitate);
-                }
+            });
+            return _this;
+        };
+        this.getElements = function () { return objectOverwrite([], _elements, true); };
+        this.setOptions = function (options) {
+            var before = JSON.stringify(_options);
+            objectOverwrite(_options, options);
+            if (before !== JSON.stringify(_options)) {
+                _this.restart();
             }
-            else {
-                node.element.style.textOverflow = 'ellipsis';
-                node.eventOn = false;
+            return _this;
+        };
+        this.getOptions = function () { return objectOverwrite({}, _options, true); };
+        this.getOption = function (key) { return _options[key]; };
+        this.getStatus = function () { return _isStart; };
+        this.start = function () {
+            var elements = _this.getElements();
+            if (elements.length) {
+                elements.forEach(addSetting.bind(_this));
+                _isStart = true;
             }
+            return _this;
         };
-        window.requestAnimationFrame(flowAnitate);
-    };
-    AdvancedEllipsis.prototype.tooltipListener = function (node) {
-        var _a;
-        var _this = this;
-        var floatElement = document.createElement("div");
-        floatElement.id = node.element.dataset.tooltipElementId;
-        var newClass = node.element.dataset.tooltipElementClass || this.options.tooltipElementClass;
-        if (newClass) {
-            (_a = floatElement.classList).add.apply(_a, newClass.split(' '));
-        }
-        var listener = function (event) {
-            if (!node.eventOn) {
-                floatElement.innerText = node.element.innerText;
-                _this.objectOverwrite(floatElement.style, _this.defalutTooltipStyle(event));
-                _this.objectOverwrite(floatElement.style, _this.options.customTooltipStyle);
-                document.body.appendChild(floatElement);
-                node.eventOn = true;
-                node.timer = setTimeout(function () {
-                    document.body.removeChild(floatElement);
-                    clearTimeout(node.timer);
-                    node.eventOn = false;
-                }.bind(_this), _this.options.tooltipDuration);
+        this.destroy = function () {
+            var elements = _this.getElements();
+            if (elements.length) {
+                _observer.disconnect();
+                elements.forEach(removeSetting.bind(_this));
+                _isStart = false;
             }
-            else {
-                _this.objectOverwrite(floatElement.style, _this.defalutTooltipStyle(event));
-                _this.objectOverwrite(floatElement.style, _this.options.customTooltipStyle);
-                clearTimeout(node.timer);
-                node.timer = setTimeout(function () {
-                    document.body.removeChild(floatElement);
-                    clearTimeout(node.timer);
-                    node.eventOn = false;
-                }.bind(_this), _this.options.tooltipDuration);
+            return _this;
+        };
+        this.restart = function () {
+            var elements = _this.getElements();
+            if (_isStart && elements.length) {
+                _observer.disconnect();
+                elements.forEach(removeSetting.bind(_this));
+                elements.forEach(addSetting.bind(_this));
             }
+            return _this;
         };
-        return listener;
-    };
-    AdvancedEllipsis.prototype.titleText = function (node) {
-        node.element.title = node.element.innerText;
-    };
+        this.setElements('[data-ellipsis]');
+        if (typeof options === 'string') {
+            this.setElements(options);
+        }
+        else if (typeof options === 'object') {
+            this.setOptions(options);
+            if (typeof selector === 'string') {
+                this.setElements(selector);
+            }
+        }
+        Object.freeze(this);
+    }
     return AdvancedEllipsis;
 }());

package.json

 {
 	"name": "advanced-ellipsis",
-	"version": "0.1.1",
+	"version": "0.2.2",
 	"description": "Advanced ellipsis available in JS",
@@ -11,3 +11,5 @@ "main": "dist/advanced-ellipsis.esm.js",
 		"build": "tsc",
-		"watch": "tsc --watch"
+		"watch": "tsc --watch",
+		"lint": "eslint . --ext .ts",
+		"lint-fix": "eslint . --ext .ts --fix"
 	},
@@ -25,16 +27,20 @@ "repository": {
 	"devDependencies": {
-		"typescript": "^4.4.4"
+		"@typescript-eslint/eslint-plugin": "^5.4.0",
+		"@typescript-eslint/parser": "^5.4.0",
+		"eslint": "^8.3.0",
+		"typescript": "^4.5.2"
 	},
 	"keywords": [
-	  "javascript",
-	  "vanilla javascript",
-	  "auto-ellipsis",
-	  "ellipsis",
-	  "elipsis",
-	  "flow",
-	  "tooltip",
-	  "html",
-	  "css",
-	  "truncate"
+		"javascript",
+		"vanilla javascript",
+		"auto-ellipsis",
+		"auto",
+		"ellipsis",
+		"elipsis",
+		"flow",
+		"tooltip",
+		"html",
+		"css",
+		"truncate"
 	]
 }

README.MD

@@ -38,3 +38,3 @@ # Advanced Ellipsis
 
-
+<br><br>
 ## Demo
@@ -44,3 +44,3 @@
 
-
+<br><br>
 ## Methods
@@ -50,27 +50,43 @@
 ```js
-const advancedEllipsis = new AdvancedEllipsis( $selector | $options );
-// If props is string, run getElements(), and if object, run setOptions().
+const advancedEllipsis = new AdvancedEllipsis($selector);
+or
+const advancedEllipsis = new AdvancedEllipsis($options);
+or
+const advancedEllipsis = new AdvancedEllipsis($options, $selector);
+// $selector is a string
+// $options is an object
 ```
+If `$selector` is not entered, `'[data-ellipsis]'` is set as the default.
+
 ### Methods
+
+|Methods|Description|Parameter|return|
+|-|-|-|-|
+|`start`|Set ellipsis according to the set `$options` and `$attributes`.<br>`$status` becomes true|-|`this`|
+|`destroy`|Restore the ellipsis set through the `start()`.<br>`$status` becomes false|-|`this`|
+|`restart`|Restart when `$status` is start(true).|-|`this`|
+
+<br>
+
 |Methods|Description|Parameter|Parameter type|return|
 |-|-|-|-|-|
-|`start`|Set ellipsis according to the set `options` and `attributes`.|-|-|-|
-|`destroy`|Restore the ellipsis set through the `start()`|-|-|-|
-|`setElements`|Reset elements to `$selector`.<br>Since `destroy()` is called, `start()` should be called again.|`$selector`|string|-|-|
-|`addElements`|Add elements as `$selector`.<br>You need to call `start()` for the added elements.<br>(Automatically prevents overlapping)|`$selector`|string|-|
-|`getElements`|Returns the currently added `elements`.<br>(Includes elements that haven't started)|-|-|Array&lt;HTMLElement&gt;|
-|`setOptions`|Set `$options` and Run `setElements(option.selector)`<br>(see options below for content)|`$options`|object|-|
+|`setElements`|Set the element according to the `$selector`.<br>Existing elements are automatically `destroy()`|`$selector`|string|`this`|
+|`getElements`|Returns the set elements in an array.<br>Changing the returned array does not change the elements<br>(it is possible to change the element itself).|-|-|Array&lt;HTMLElement&gt;|
+|`setOptions`|Set the options according to the `$options`.<br>Calls `restart()` when options have changed|`$options`|object|`this`|
+|`getOptions`|Calls the set option.<br>Converting the returned object does not change the options.|-|-|object|
+|`getOption`|Returns the option value corresponding to `$optionKey`|`$optionKey`|string|boolean &#124; number &#124; string &#124; object|
+|`getStatus`|Returns `$status`. If it is true, `start()` is in operation. If false, it is before `start()` or after `destroy()`.|-|-|`$status` (boolean)|
 
-
+<br><br>
 ## Options and Attributes
 
-### common options
+### common options <span id="options"></span>
 |Option|Description|Type|Default|
 |-|-|-|-|
-|`defalutStyles`|If the value is true, apply ellipsis by default. If false, you have to modify the style yourself to ellipsis.|boolean|true|
-|`useCloneNode`|If the value is true, use cloneNode to determine ellipsis. If false, use scrollWidth.|boolean|false|
-|`showOption`|It gives special effects to ellipsis processed nodes.<br>`'static'`: I only apply ellipsis.<br>`'flow'`: Text flows sideways when a mouse hover or touch is touched.<br>`'flow-auto'`: Text automatically flows sideways.<br>`'title'`: Insert innerText into Title Attributes. (Hard to check on mobile devices)<br>`'tooltip'`: Text flows sideways when a mouse hover or touch is touched.|string|'static'|
-|`selector`|Selector to select nodes to which ellipsis will be applied.|string|'[data-ellipsis]'|
+|`mutationObserver`|When this value is true and `$status` is start(true),<br>change the set element is detected.<br>Elements whose changes are detected are reset.|boolean|true|
+|`defalutStyles`|If the value is true, apply ellipsis by default.<br>If false, you have to modify the style yourself to ellipsis.<br>`defalutStyles` = {<br>&emsp;overflow: hidden;<br>&emsp;white-space: nowrap;<br>&emsp;text-overflow: ellipsis;<br>}|boolean|true|
+|`useCloneNode`|If the value is true, use cloneNode to determine ellipsis.<br>If false, use scrollWidth.|boolean|false|
+|`showOption`|It gives special effects to ellipsis processed nodes.<br>`'static'`: I only apply ellipsis.<br>`'flow'`: Text flows sideways when a mouse hover or touch is touched.<br>`'flow-auto'`: Text automatically flows sideways.<br>`'tooltip'`: Text flows sideways when a mouse hover or touch is touched.|string|'static'|
 
-### flow options
+### flow options <span id="flow_options"></span>
 When `showOption` or `data-ellipsis-show-option` is `'flow'` or `'flow-auto'`
@@ -83,14 +99,16 @@ |Option|Description|Type|Unit|Default|
 |`flowPadding`|Add the space at the end as the text flows.|number|px|20|
-|`flowCount`|The number of flows at once when the `showOption` is `'flow'`.|number|Unit|1|
-|`flowAutoCount`|The number of flows when `showOption` is `'flow-auto'`.|number|Unit|Infinity|
+|`flowCount`|The number of flows running after the event occurs.<br>when the `showOption` is `'flow'`.|number|-|1|
+|`flowCountPre`|The number of flows that are executed as soon as the setting is made.<br>when the `showOption` is `'flow'`.|number|-|0|
+|`flowAutoCount`|The number of flows when `showOption` is `'flow-auto'`.|number|-|Infinity|
 
-### tooltip options
+### tooltip options <span id="tooltip_options"></span>
 When `showOption` or `data-ellipsis-show-option` is `'tooltip'`
 |Option|Description|Type|Default|
 |-|-|-|-|
-|`tooltipElementClass`|The class applied to the tooltip that is created.|string|'ellipsis_tooltip_box'|
+|`tooltipShowAlways`|Set to true if you want tooltips to appear even in non-ellipsis text.|boolean|false|
+|`tooltipClass`|The class applied to the tooltip that is created.<br>(Strings separated by spacebars)|string|'ellipsis_tooltip_box'|
 |`tooltipDuration`|The time when the tool tip is maintained. (unit: ms)|number|Default|
-|`customTooltipStyle`|Apply custom style to tool tip.|object|{ }|
+|`customTooltipStyles`|Apply custom style to tool tip.|object|{ }|
 
-### attributes
+### attributes <span id="attribute"></span>
 If the element has the following prop, overwrite the options.
@@ -103,10 +121,29 @@ >
 |Attributes|Description|
-|-|-|
-|`data-ellipsis-show-option`|The class applied to the tooltip that is created.|
-|`data-ellipsis-flow-count`|The number of flows<br>(overwrite both `flowCount` and `flowAutoCount`)|
-|`data-tooltip-element-id`|The class applied to the tooltip that is created.|
-|`data-tooltip-element-class`|The id applied to the tooltip that is created.|
+|---|----|
+|`data-show-option`|overwrite [`showOption`](#options)|
+|`data-flow-count`|overwrite both [`flowCount`](#flow_options) and [`flowAutoCount`](#flow_options)|
+|`data-flow-count-pre`|overwrite [`flowCountPre`](#flow_options)|
+|`data-tooltip-show-always`|overwrite [`tooltipShowAlways`](#tooltip_options)|
+|`data-tooltip-id`|The class applied to the tooltip that is created.|
+|`data-tooltip-class`|The id applied to the tooltip that is created.<br>(Strings separated by spacebars)|
 
+<br><br>
+## Description
 
+- Elements only apply if they have only one text note as a child.
+- when [`showOption`](#options) is `'flow'`, `'flow-auto'` or `'tooltip'`,<br>it detects `mouseover` or `touchstart` and operates.
+- The default value of elements is `'[data-ellipsis]'`.
+- Always follow the priority below
+> Options
+> > [`Attributes`](#attribute) > [`custom Options`](#options) > [`default Options`](#options)
+> ___
+> Tooltip Element Class
+> > [`Attributes`](#attribute) > [`tooltipElementClass`](#tooltip_options)
+> ___
+> Tooltip Element Styles
+> > `!important styles` > `customTooltipStyles` > `defalutTooltipStyles` > `User-entered inline styles` > `css styles`
+> >
+> >`customTooltipStyles` and `defalutTooltipStyles` will be override `User-entered inline styles`
 
+
 ## License
@@ -113,0 +150,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39010

increased by19.88%

Number of package files

7

increased by40%

Lines of code

690

increased by13.3%

Number of lines in readme file

151

increased by32.46%

Worsened metrics

Dev dependency count

4

increased by300%

No dependency changes