A tooltip with a new approach (#2172)

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

plugins/tracker-resources/src/components/issues/Board.svelte

@@ -18,7 +18,7 @@
   import { Kanban, TypeState } from '@anticrm/kanban'
   import { createQuery } from '@anticrm/presentation'
   import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { Button, Icon, IconAdd, showPopup, Tooltip, showPanel, Component } from '@anticrm/ui'
+  import { Button, Icon, IconAdd, showPopup, showPanel, Component } from '@anticrm/ui'
   import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
   import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
   import Menu from '@anticrm/view-resources/src/components/Menu.svelte'
@@ -139,15 +139,14 @@
             <span class="counter ml-2 text-md">{count}</span>
           </div>
           <div class="flex gap-1">
-            <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
-              <Button
-                icon={IconAdd}
-                kind={'transparent'}
-                on:click={() => {
-                  showPopup(CreateIssue, { space: currentSpace, status: state._id }, 'top')
-                }}
-              />
-            </Tooltip>
+            <Button
+              icon={IconAdd}
+              kind={'transparent'}
+              showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
+              on:click={() => {
+                showPopup(CreateIssue, { space: currentSpace, status: state._id }, 'top')
+              }}
+            />
           </div>
         </div>
       </div>

plugins/tracker-resources/src/components/issues/KanbanView.svelte

@@ -19,7 +19,7 @@
   import notification from '@anticrm/notification'
   import { createQuery, getClient } from '@anticrm/presentation'
   import { Issue, IssuesGrouping, IssuesOrdering, IssueStatus, Team, ViewOptions } from '@anticrm/tracker'
-  import { Button, Component, Icon, IconAdd, showPanel, showPopup, Tooltip } from '@anticrm/ui'
+  import { Button, Component, Icon, IconAdd, showPanel, showPopup } from '@anticrm/ui'
   import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
   import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
   import Menu from '@anticrm/view-resources/src/components/Menu.svelte'
@@ -144,15 +144,14 @@
           </div>
           {#if groupBy === IssuesGrouping.Status}
             <div class="flex gap-1">
-              <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
-                <Button
-                  icon={IconAdd}
-                  kind={'transparent'}
-                  on:click={() => {
-                    showPopup(CreateIssue, { space: currentSpace, status: state._id }, 'top')
-                  }}
-                />
-              </Tooltip>
+              <Button
+                icon={IconAdd}
+                kind={'transparent'}
+                showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
+                on:click={() => {
+                  showPopup(CreateIssue, { space: currentSpace, status: state._id }, 'top')
+                }}
+              />
             </div>
           {/if}
         </div>

plugins/tracker-resources/src/components/issues/ParentIssue.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createQuery } from '@anticrm/presentation'
   import { Team, Issue } from '@anticrm/tracker'
-  import { Spinner, IconClose, Tooltip } from '@anticrm/ui'
+  import { Spinner, IconClose, tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import { getIssueId } from '../../utils'
@@ -38,11 +38,13 @@
     <Spinner size="small" />
   {/if}
   <span class="overflow-label issue-title">{issue.title}</span>
-  <Tooltip label={tracker.string.RemoveParent} direction="bottom">
-    <div class="button-close" on:click={() => dispatch('close')}>
-      <IconClose size="x-small" />
-    </div>
-  </Tooltip>
+  <div
+    class="button-close"
+    use:tooltip={{ label: tracker.string.RemoveParent, direction: 'bottom' }}
+    on:click={() => dispatch('close')}
+  >
+    <IconClose size="x-small" />
+  </div>
 </div>
 
 <style lang="scss">

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}