A tooltip with a new approach (#2172)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte

@@ -14,13 +14,16 @@
 -->
 <script lang="ts">
   import { Asset, IntlString } from '@anticrm/platform'
-  import { Button, Tooltip } from '@anticrm/ui'
+  import { Button } from '@anticrm/ui'
 
   export let icon: Asset
   export let title: IntlString
   export let text: string
 </script>
 
-<Tooltip label={title} direction="bottom" fill>
-  <Button {icon} kind="transparent" on:click={() => navigator.clipboard.writeText(text)} />
-</Tooltip>
+<Button
+  {icon}
+  kind={'transparent'}
+  showTooltip={{ label: title, direction: 'bottom' }}
+  on:click={() => navigator.clipboard.writeText(text)}
+/>

plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte

@@ -18,7 +18,7 @@
   import { Team, Issue, IssueStatus } from '@anticrm/tracker'
   import {
     Icon,
-    Tooltip,
+    tooltip,
     showPanel,
     IconForward,
     IconDetails,
@@ -99,20 +99,22 @@
 </script>
 
 {#if parentIssue}
+  {@const icon = getIssueStatusIcon(issue)}
   <div class="flex root">
     <div class="item clear-mins">
-      <Tooltip label={tracker.string.OpenParent} direction="bottom" fill>
-        {@const icon = getIssueStatusIcon(issue)}
-        <div class="flex-center parent-issue" on:click={openParentIssue}>
-          {#if icon}
-            <div class="pr-2">
-              <Icon {icon} size="small" />
-            </div>
-          {/if}
-          <span class="overflow-label flex-no-shrink mr-2">{getIssueId(team, parentIssue)}</span>
-          <span class="overflow-label issue-title">{parentIssue.title}</span>
-        </div>
-      </Tooltip>
+      <div
+        class="flex-center parent-issue cursor-pointer"
+        use:tooltip={{ label: tracker.string.OpenParent, direction: 'bottom' }}
+        on:click={openParentIssue}
+      >
+        {#if icon}
+          <div class="pr-2">
+            <Icon {icon} size="small" />
+          </div>
+        {/if}
+        <span class="overflow-label flex-no-shrink mr-2">{getIssueId(team, parentIssue)}</span>
+        <span class="overflow-label issue-title">{parentIssue.title}</span>
+      </div>
     </div>
 
     <div class="item">
@@ -121,22 +123,21 @@
           <Spinner size="small" />
         </div>
       {:else}
-        <Tooltip label={tracker.string.OpenSubIssues} direction="bottom">
-          <div
-            bind:this={subIssuesElement}
-            class="flex-center sub-issues"
-            on:click|preventDefault={areSubIssuesLoading ? undefined : showSubIssues}
-          >
-            <span class="overflow-label">{subIssues?.length}</span>
-            <div class="ml-2">
-              <!-- TODO: fix icon -->
-              <Icon icon={IconDetails} size="small" />
-            </div>
-            <div class="ml-1-5">
-              <Icon icon={IconForward} size="small" />
-            </div>
+        <div
+          bind:this={subIssuesElement}
+          class="flex-center sub-issues cursor-pointer"
+          use:tooltip={{ label: tracker.string.OpenSubIssues, direction: 'bottom' }}
+          on:click|preventDefault={areSubIssuesLoading ? undefined : showSubIssues}
+        >
+          <span class="overflow-label">{subIssues?.length}</span>
+          <div class="ml-2">
+            <!-- TODO: fix icon -->
+            <Icon icon={IconDetails} size="small" />
           </div>
-        </Tooltip>
+          <div class="ml-1-5">
+            <Icon icon={IconForward} size="small" />
+          </div>
+        </div>
       {/if}
     </div>
   </div>

plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte

@@ -16,7 +16,7 @@
   import { SortingOrder, WithLookup } from '@anticrm/core'
   import { createQuery, getClient } from '@anticrm/presentation'
   import { calcRank, Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { Button, Spinner, ExpandCollapse, Tooltip, closeTooltip, IconAdd } from '@anticrm/ui'
+  import { Button, Spinner, ExpandCollapse, closeTooltip, IconAdd } from '@anticrm/ui'
   import tracker from '../../../plugin'
   import Collapsed from '../../icons/Collapsed.svelte'
   import Expanded from '../../icons/Expanded.svelte'
@@ -69,22 +69,21 @@
     />
   {/if}
 
-  <Tooltip label={tracker.string.AddSubIssues} props={{ subIssues: 1 }} direction="bottom">
-    <Button
-      id="add-sub-issue"
-      width="min-content"
-      icon={hasSubIssues ? IconAdd : undefined}
-      label={hasSubIssues ? undefined : tracker.string.AddSubIssues}
-      labelParams={{ subIssues: 0 }}
-      size="small"
-      kind="transparent"
-      on:click={() => {
-        closeTooltip()
-        isCreating = true
-        isCollapsed = false
-      }}
-    />
-  </Tooltip>
+  <Button
+    id="add-sub-issue"
+    width="min-content"
+    icon={hasSubIssues ? IconAdd : undefined}
+    label={hasSubIssues ? undefined : tracker.string.AddSubIssues}
+    labelParams={{ subIssues: 0 }}
+    kind={'transparent'}
+    size={'small'}
+    showTooltip={{ label: tracker.string.AddSubIssues, props: { subIssues: 1 }, direction: 'bottom' }}
+    on:click={() => {
+      closeTooltip()
+      isCreating = true
+      isCollapsed = false
+    }}
+  />
 </div>
 <div class="mt-1">
   {#if subIssues && issueStatuses && currentTeam}