A tooltip with a new approach (#2172)

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

plugins/tracker-resources/src/components/AppItem.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { IntlString, Asset } from '@anticrm/platform'
   import type { AnySvelteComponent } from '@anticrm/ui'
-  import { Icon, Tooltip } from '@anticrm/ui'
+  import { Icon, tooltip } from '@anticrm/ui'
 
   export let label: IntlString
   export let icon: Asset | AnySvelteComponent
@@ -24,14 +24,12 @@
   export let notify: boolean
 </script>
 
-<Tooltip {label}>
-  <button class="app" id={'app-' + label} class:selected on:click|stopPropagation={action}>
-    <div class="flex-center icon-container" class:noty={notify}>
-      <Icon {icon} size={'large'} />
-    </div>
-    {#if notify}<div class="marker" />{/if}
-  </button>
-</Tooltip>
+<button class="app" class:selected id={'app-' + label} use:tooltip={{ label }} on:click|stopPropagation={action}>
+  <div class="flex-center icon-container" class:noty={notify}>
+    <Icon {icon} size={'large'} />
+  </div>
+  {#if notify}<div class="marker" />{/if}
+</button>
 
 <style lang="scss">
   .app {

plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Timestamp } from '@anticrm/core'
-  import { DatePresenter, Tooltip, getDaysDifference } from '@anticrm/ui'
+  import { DatePresenter, tooltip, getDaysDifference } from '@anticrm/ui'
   import DueDatePopup from './DueDatePopup.svelte'
   import { getDueDateIconModifier } from '../utils'
 
@@ -43,14 +43,17 @@
 
 {#if shouldRender}
   {#if formattedDate}
-    <Tooltip
-      direction={'top'}
-      component={DueDatePopup}
-      props={{
-        formattedDate: formattedDate,
-        daysDifference: daysDifference,
-        isOverdue: isOverdue,
-        iconModifier: iconModifier
+    <div
+      class="clear-mins"
+      use:tooltip={{
+        direction: 'top',
+        component: DueDatePopup,
+        props: {
+          formattedDate: formattedDate,
+          daysDifference: daysDifference,
+          isOverdue: isOverdue,
+          iconModifier: iconModifier
+        }
       }}
     >
       <DatePresenter
@@ -61,7 +64,7 @@
         {kind}
         on:change={handleDueDateChanged}
       />
-    </Tooltip>
+    </div>
   {:else}
     <DatePresenter
       value={dateMs}

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}

plugins/tracker-resources/src/components/projects/LeadPresenter.svelte

@@ -18,7 +18,7 @@
   import { Project } from '@anticrm/tracker'
   import { UsersPopup, getClient } from '@anticrm/presentation'
   import { AttributeModel } from '@anticrm/view'
-  import { eventToHTMLElement, showPopup, Tooltip } from '@anticrm/ui'
+  import { eventToHTMLElement, showPopup } from '@anticrm/ui'
   import { getObjectPresenter } from '@anticrm/view-resources'
   import { IntlString } from '@anticrm/platform'
   import tracker from '../../plugin'
@@ -85,19 +85,17 @@
 </script>
 
 {#if value && presenter}
-  <Tooltip component={LeadPopup} props={{ lead: value }}>
-    <svelte:component
-      this={presenter.presenter}
-      {value}
-      {defaultName}
-      avatarSize={'tiny'}
-      isInteractive={true}
-      shouldShowPlaceholder={true}
-      shouldShowName={shouldShowLabel}
-      onEmployeeEdit={handleLeadEditorOpened}
-      tooltipLabels={{ personLabel: tracker.string.AssignedTo, placeholderLabel: tracker.string.AssignTo }}
-    />
-  </Tooltip>
+  <svelte:component
+    this={presenter.presenter}
+    {value}
+    {defaultName}
+    avatarSize={'tiny'}
+    isInteractive={true}
+    shouldShowPlaceholder={true}
+    shouldShowName={shouldShowLabel}
+    onEmployeeEdit={handleLeadEditorOpened}
+    tooltipLabels={{ component: LeadPopup, props: { lead: value } }}
+  />
 {:else if presenter}
   <svelte:component
     this={presenter.presenter}

plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte

@@ -15,7 +15,6 @@
 <script lang="ts">
   import { Project, ProjectStatus } from '@anticrm/tracker'
   import { getClient } from '@anticrm/presentation'
-  import { Tooltip } from '@anticrm/ui'
   import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import tracker from '../../plugin'
 
@@ -42,18 +41,17 @@
 
 {#if value}
   {#if isEditable}
-    <Tooltip label={tracker.string.SetStatus} fill>
-      <ProjectStatusSelector
-        {kind}
-        {size}
-        {width}
-        {justify}
-        {isEditable}
-        {shouldShowLabel}
-        selectedProjectStatus={value.status}
-        onProjectStatusChange={handleProjectStatusChanged}
-      />
-    </Tooltip>
+    <ProjectStatusSelector
+      {kind}
+      {size}
+      {width}
+      {justify}
+      {isEditable}
+      {shouldShowLabel}
+      showTooltip={{ label: tracker.string.SetStatus }}
+      selectedProjectStatus={value.status}
+      onProjectStatusChange={handleProjectStatusChanged}
+    />
   {:else}
     <ProjectStatusSelector
       {kind}

plugins/tracker-resources/src/components/projects/ProjectStatusSelector.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { ProjectStatus } from '@anticrm/tracker'
   import { Button, showPopup, SelectPopup, eventToHTMLElement } from '@anticrm/ui'
-  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize, LabelAndProps } from '@anticrm/ui'
   import tracker from '../../plugin'
   import { defaultProjectStatuses, projectStatusAssets } from '../../utils'
 
@@ -28,6 +28,7 @@
   export let size: ButtonSize = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
+  export let showTooltip: LabelAndProps | undefined = undefined
 
   $: selectedStatusIcon = selectedProjectStatus
     ? projectStatusAssets[selectedProjectStatus].icon
@@ -62,5 +63,6 @@
   disabled={!isEditable}
   icon={selectedStatusIcon}
   label={selectedStatusLabel}
+  {showTooltip}
   on:click={handleProjectStatusEditorOpened}
 />

plugins/tracker-resources/src/components/projects/ProjectsList.svelte

@@ -17,7 +17,7 @@
   import { Class, Doc, FindOptions, getObjectValue, Ref } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import { Issue, Project } from '@anticrm/tracker'
-  import { CheckBox, Spinner, Tooltip } from '@anticrm/ui'
+  import { CheckBox, Spinner, tooltip } from '@anticrm/ui'
   import { AttributeModel, BuildModelKey } from '@anticrm/view'
   import { buildModel, getObjectPresenter, LoadingProps } from '@anticrm/view-resources'
   import { createEventDispatcher } from 'svelte'
@@ -115,16 +115,17 @@
             {#each itemModels as attributeModel, attributeModelIndex}
               {#if attributeModelIndex === 0}
                 <div class="gridElement">
-                  <Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
-                    <div class="eListGridCheckBox">
-                      <CheckBox
-                        checked={selectedObjectIdsSet.has(docObject._id)}
-                        on:value={(event) => {
-                          onObjectChecked([docObject], event.detail)
-                        }}
-                      />
-                    </div>
-                  </Tooltip>
+                  <div
+                    class="eListGridCheckBox"
+                    use:tooltip={{ direction: 'bottom', label: tracker.string.SelectIssue }}
+                  >
+                    <CheckBox
+                      checked={selectedObjectIdsSet.has(docObject._id)}
+                      on:value={(event) => {
+                        onObjectChecked([docObject], event.detail)
+                      }}
+                    />
+                  </div>
                   <div class="iconPresenter">
                     <svelte:component
                       this={attributeModel.presenter}