feat: support tooltip in group header

Related to camunda/camunda-modeler#3611
bpmn-io · Jul 21, 2023 · f0368bb · f0368bb
1 parent b92c57f
commit f0368bb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/assets/properties-panel.css b/assets/properties-panel.css
@@ -1135,6 +1135,7 @@ textarea.bio-properties-panel-input {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 2px;
+  font: inherit;
 }
 
 .bio-properties-panel-tooltip {

diff --git a/src/components/Group.js b/src/components/Group.js
@@ -6,6 +6,8 @@ import {
   useState
 } from 'preact/hooks';
 
+import Tooltip from './entries/Tooltip';
+
 import classnames from 'classnames';
 
 import {
@@ -96,7 +98,9 @@ export default function Group(props) {
       (sticky && open) ? 'sticky' : ''
     ) } onClick={ toggleOpen }>
       <div title={ label } class="bio-properties-panel-group-header-title">
-        { label }
+        <Tooltip value={ props.tooltip } forId={ 'group-' + id } element={ element }>
+          { label }
+        </Tooltip>
       </div>
       <div class="bio-properties-panel-group-header-buttons">
         {

diff --git a/src/components/ListGroup.js b/src/components/ListGroup.js
@@ -6,6 +6,8 @@ import {
   useState
 } from 'preact/hooks';
 
+import Tooltip from './entries/Tooltip';
+
 import classnames from 'classnames';
 
 import {
@@ -199,7 +201,9 @@ export default function ListGroup(props) {
         title={ label }
         class="bio-properties-panel-group-header-title"
       >
-        { label }
+        <Tooltip value={ props.tooltip } forId={ 'group-' + id } element={ element }>
+          { label }
+        </Tooltip>
       </div>
       <div class="bio-properties-panel-group-header-buttons">
         {

diff --git a/src/components/entries/Tooltip.js b/src/components/entries/Tooltip.js
@@ -107,7 +107,9 @@ function Tooltip(props) {
       onMouseEnter={ showTooltip }
       onMouseLeave={ ()=> clearTimeout(timeout) }
       onFocus={ showTooltip }
-      onKeyDown={ hideTooltipViaEscape }>
+      onKeyDown={ hideTooltipViaEscape }
+      onMouseDown={ (e)=> {e.preventDefault();} }
+    >
       {props.children}
       {visible ?
         <div