A tooltip with a new approach (#2172)

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

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}