Fixed #932 - Tooltip in chips does not work properly

primefaces · Jun 20, 2019 · b2b137a · b2b137a
1 parent 64a2b6f
commit b2b137a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/src/components/chips/Chips.js b/src/components/chips/Chips.js
@@ -61,11 +61,18 @@ export class Chips extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (this.props.tooltip && prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
+        let isValueSame = this.props.value && prevProps.value.length === this.props.value.length;
+        if (this.props.tooltip) {
+            if (prevProps.tooltip !== this.props.tooltip) {
+                if (this.tooltip)
+                    this.tooltip.updateContent(this.props.tooltip);
+                else
+                    this.renderTooltip();
+            }
+            else if (!isValueSame && this.tooltip) {
+                this.tooltip.deactivate();
+                this.tooltip.activate();
+            }
         }
     }
 
@@ -78,7 +85,8 @@ export class Chips extends Component {
 
     renderTooltip() {
         this.tooltip = new Tooltip({
-            target: this.element,
+            target: this.inputElement,
+            targetContainer: this.listElement,
             content: this.props.tooltip,
             options: this.props.tooltipOptions
         });

diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
@@ -4,6 +4,7 @@ export default class Tooltip  {
 
     constructor(props) {
         this.target = props.target;
+        this.targetContainer = props.targetContainer;
         this.content = props.content;
         this.options = props.options || {};
         this.options.event = this.options.event || 'hover';
@@ -204,7 +205,8 @@ export default class Tooltip  {
     }
 
     getHostOffset() {
-        let offset = this.target.getBoundingClientRect();
+        let target = this.targetContainer || this.target;
+        let offset = target.getBoundingClientRect();
         let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
         let targetTop = offset.top + DomHandler.getWindowScrollTop();
 
@@ -213,36 +215,40 @@ export default class Tooltip  {
 
     alignRight() {
         this.preAlign('right');
+        let target = this.targetContainer || this.target;
         let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + DomHandler.getOuterWidth(this.target);
-        let top = hostOffset.top + (DomHandler.getOuterHeight(this.target) - DomHandler.getOuterHeight(this.container)) / 2;
+        let left = hostOffset.left + DomHandler.getOuterWidth(target);
+        let top = hostOffset.top + (DomHandler.getOuterHeight(target) - DomHandler.getOuterHeight(this.container)) / 2;
         this.container.style.left = left + 'px';
         this.container.style.top = top + 'px';
     }
 
     alignLeft() {
         this.preAlign('left');
+        let target = this.targetContainer || this.target;
         let hostOffset = this.getHostOffset();
         let left = hostOffset.left - DomHandler.getOuterWidth(this.container);
-        let top = hostOffset.top + (DomHandler.getOuterHeight(this.target) - DomHandler.getOuterHeight(this.container)) / 2;
+        let top = hostOffset.top + (DomHandler.getOuterHeight(target) - DomHandler.getOuterHeight(this.container)) / 2;
         this.container.style.left = left + 'px';
         this.container.style.top = top + 'px';
     }
 
     alignTop() {
         this.preAlign('top');
+        let target = this.targetContainer || this.target;
         let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + (DomHandler.getOuterWidth(this.target) - DomHandler.getOuterWidth(this.container)) / 2;
+        let left = hostOffset.left + (DomHandler.getOuterWidth(target) - DomHandler.getOuterWidth(this.container)) / 2;
         let top = hostOffset.top - DomHandler.getOuterHeight(this.container);
         this.container.style.left = left + 'px';
         this.container.style.top = top + 'px';
     }
 
     alignBottom() {
         this.preAlign('bottom');
+        let target = this.targetContainer || this.target;
         let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + (DomHandler.getOuterWidth(this.target) - DomHandler.getOuterWidth(this.container)) / 2;
-        let top = hostOffset.top + DomHandler.getOuterHeight(this.target);
+        let left = hostOffset.left + (DomHandler.getOuterWidth(target) - DomHandler.getOuterWidth(this.container)) / 2;
+        let top = hostOffset.top + DomHandler.getOuterHeight(target);
         this.container.style.left = left + 'px';
         this.container.style.top = top + 'px';
     }
@@ -286,5 +292,6 @@ export default class Tooltip  {
         this.unbindEvents();
         this.remove();
         this.target = null;
+        this.targetContainer = null;
     }
  }