Fixed #2536 - Tooltip new fitContent property

primefaces · May 31, 2022 · 380345a · 380345a
1 parent 21a5a6a
commit 380345a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
@@ -120,6 +120,10 @@ function create(el) {
 
     container.style.display = 'inline-block';
 
+    if (el.$_ptooltipFitContent) {
+        container.style.width = 'fit-content';
+    }
+
     return container;
 }
 
@@ -293,12 +297,14 @@ const Tooltip = {
             target.$_ptooltipDisabled = false;
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
+            target.$_ptooltipFitContent = true;
         }
         else {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled || false;
             target.$_ptooltipEscape = options.value.escape || false;
             target.$_ptooltipClass = options.value.class;
+            target.$_ptooltipFitContent = options.value.fitContent || true;
         }
 
         target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip;

diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
@@ -97,6 +97,12 @@ directives: {
                         <td>true</td>
                         <td>By default the tooltip contents are rendered as text. Set to true to support html tags in the content.</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>
                 </tbody>
             </table>
         </div>