Merge pull request #11556 from cetincakiroglu/issue-11502

Fixed #11502 - Tooltip | fit-content support
primefaces · May 31, 2022 · a3a2bea · a3a2bea
2 parents 2908cf3 + e2cbd85
commit a3a2bea
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts
@@ -53,6 +53,8 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     @Input() positionLeft: number;
 
+    @Input() fitContent: boolean = true;
+
     @Input('pTooltip') text: string;
 
     @Input("tooltipDisabled") get disabled(): boolean {
@@ -300,6 +302,10 @@ export class Tooltip implements AfterViewInit, OnDestroy {
             DomHandler.appendChild(this.container, this.getOption('appendTo'));
 
         this.container.style.display = 'inline-block';
+
+        if (this.fitContent) {
+            this.container.style.width = 'fit-content';
+        }
     }
 
     show() {

diff --git a/src/app/showcase/components/tooltip/tooltipdemo.html b/src/app/showcase/components/tooltip/tooltipdemo.html
@@ -102,6 +102,12 @@ <h5>Properties</h5>
                             <td>right</td>
                             <td>Position of the tooltip, valid values are right, left, top and bottom.</td>
                         </tr>
+                        <tr>
+                            <td>fitContent</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Automatically adjusts the element position when there is not enough space on the selected position.</td>
+                        </tr>
                         <tr>
                             <td>tooltipEvent</td>
                             <td>string</td>