From 94ee6f5afe40042d29715cfb2e2b67bb27e62ea7 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 30 Jun 2022 06:41:46 +0300
Subject: [PATCH] A tooltip with a new approach (#2172)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ObjectPopup.svelte         |   9 +-
 .../src/components/PDFViewer.svelte           |  11 +-
 .../src/components/SpaceMultiBoxList.svelte   |  41 +++--
 .../src/components/SpaceSelect.svelte         |  23 ++-
 .../src/components/SpacesMultiPopup.svelte    |   6 +-
 .../src/components/UserBoxList.svelte         |  45 +++--
 .../src/components/EmojiPopup.svelte          |  20 +--
 .../src/components/ReferenceInput.svelte      | 157 +++++++++---------
 packages/ui/src/components/ActionIcon.svelte  |  19 ++-
 packages/ui/src/components/Dropdown.svelte    |  48 +++---
 .../ui/src/components/DropdownLabels.svelte   |  54 +++---
 .../src/components/DropdownLabelsIntl.svelte  |  58 ++++---
 .../ui/src/components/ErrorPresenter.svelte   |   6 +-
 packages/ui/src/tooltips.ts                   |   6 +-
 .../src/components/DocReminder.svelte         |  12 +-
 .../src/components/PersonsPresenter.svelte    |  17 +-
 .../src/components/ReminderPresenter.svelte   |  17 +-
 .../src/components/Message.svelte             |   8 +-
 .../src/components/Reactions.svelte           |  23 ++-
 .../src/components/ChannelsDropdown.svelte    |  26 ++-
 .../src/components/ChannelsView.svelte        |  22 +--
 .../src/components/EmployeePresenter.svelte   |  10 +-
 .../EmployeeStatusDueDatePresenter.svelte     |  14 +-
 .../components/EmployeeStatusPresenter.svelte |  15 +-
 .../src/components/PersonPresenter.svelte     |  15 +-
 .../src/components/ModelView.svelte           |   6 +-
 .../src/components/QueryView.svelte           |   6 +-
 .../src/components/Chats.svelte               |  19 +--
 .../src/components/LeadsPresenter.svelte      |  13 +-
 .../src/components/KanbanCard.svelte          |  15 +-
 .../components/VacancyCountPresenter.svelte   |  27 +--
 .../src/components/YesNo.svelte               |  81 +++++----
 .../review/OpinionsPresenter.svelte           |  13 +-
 .../components/review/PersonsPresenter.svelte |  17 +-
 .../components/typeEditors/EnumSelect.svelte  |  21 ++-
 .../typeEditors/EnumTypeEditor.svelte         |  12 +-
 .../src/components/TagItem.svelte             |  45 +++--
 .../src/components/TagsDropdownEditor.svelte  |  43 +++--
 .../src/components/KanbanCard.svelte          |  15 +-
 .../src/components/Chat.svelte                |  21 ++-
 .../src/components/AppItem.svelte             |  16 +-
 .../CommonTrackerDatePresenter.svelte         |  23 +--
 .../src/components/issues/Board.svelte        |  19 +--
 .../src/components/issues/KanbanView.svelte   |  19 +--
 .../src/components/issues/ParentIssue.svelte  |  14 +-
 .../issues/edit/CopyToClipboardButton.svelte  |  11 +-
 .../issues/edit/SubIssueSelector.svelte       |  57 +++----
 .../components/issues/edit/SubIssues.svelte   |  33 ++--
 .../components/projects/LeadPresenter.svelte  |  26 ++-
 .../projects/ProjectStatusPresenter.svelte    |  24 ++-
 .../projects/ProjectStatusSelector.svelte     |   4 +-
 .../components/projects/ProjectsList.svelte   |  23 +--
 .../src/components/ClassAttributeBar.svelte   |  33 ++--
 .../src/components/AppItem.svelte             |  16 +-
 tests/sanity/tests/settings.spec.ts           |   2 +-
 tests/sanity/tests/tags.spec.ts               |   4 +-
 56 files changed, 704 insertions(+), 656 deletions(-)

diff --git a/packages/presentation/src/components/ObjectPopup.svelte b/packages/presentation/src/components/ObjectPopup.svelte
index e995674ac0..820a84f2fa 100644
--- a/packages/presentation/src/components/ObjectPopup.svelte
+++ b/packages/presentation/src/components/ObjectPopup.svelte
@@ -26,7 +26,7 @@
     IconCheck,
     ListView,
     showPopup,
-    Tooltip
+    tooltip
   } from '@anticrm/ui'
   import { createEventDispatcher, afterUpdate } from 'svelte'
   import presentation from '..'
@@ -207,12 +207,11 @@
               <div class="icon">
                 {#if obj._id === selected}
                   {#if titleDeselect}
-                    <Tooltip label={titleDeselect ?? presentation.string.Deselect}>
+                    <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
                       <Icon icon={IconCheck} {size} />
-                    </Tooltip>
+                    </div>
                   {:else}
                     <Icon icon={IconCheck} {size} />
-                    <!-- <CheckBox checked circle primary /> -->
                   {/if}
                 {/if}
               </div>
@@ -222,7 +221,7 @@
               <slot name="item" item={obj} />
             </span>
             {#if multiSelect}
-              <div class="check pointer-events-none">
+              <div class="check-right pointer-events-none">
                 <CheckBox checked={selectedElements.has(obj._id)} primary />
               </div>
             {/if}
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index a8b44b331d..590bde5588 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, Tooltip, Panel } from '@anticrm/ui'
+  import { Button, Panel } from '@anticrm/ui'
   import type { PopupOptions } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -90,9 +90,12 @@
       <div class="buttons-divider" />
     {/if}
     <a class="no-line" href={getFileUrl(file)} download={name}>
-      <Tooltip label={presentation.string.Download}>
-        <Button icon={Download} kind={'transparent'} shape={'circle'} />
-      </Tooltip>
+      <Button
+        icon={Download}
+        kind={'transparent'}
+        shape={'circle'}
+        showTooltip={{ label: presentation.string.Download }}
+      />
     </a>
   </svelte:fragment>
 
diff --git a/packages/presentation/src/components/SpaceMultiBoxList.svelte b/packages/presentation/src/components/SpaceMultiBoxList.svelte
index fb8daf1dc1..69eb1fd14b 100644
--- a/packages/presentation/src/components/SpaceMultiBoxList.svelte
+++ b/packages/presentation/src/components/SpaceMultiBoxList.svelte
@@ -17,7 +17,7 @@
   import type { IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import type { ButtonKind, ButtonSize, TooltipAlignment } from '@anticrm/ui'
-  import { Tooltip, showPopup, Button } from '@anticrm/ui'
+  import { showPopup, Button } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation, { SpacesMultiPopup } from '..'
 
@@ -53,23 +53,22 @@
   }
 </script>
 
-<Tooltip {label} fill={width === '100%'} direction={labelDirection}>
-  <Button
-    label={selectedItems.length === 0 ? presentation.string.Spaces : undefined}
-    width={width ?? 'min-content'}
-    {kind}
-    {size}
-    {justify}
-    on:click={addSpace}
-  >
-    <svelte:fragment slot="content">
-      {#if selectedItems.length > 0}
-        <div class="flex-row-center flex-nowrap">
-          {#await translate(presentation.string.NumberSpaces, { count: selectedItems.length }) then text}
-            <span class="overflow-label disabled ml-1-5">{text}</span>
-          {/await}
-        </div>
-      {/if}
-    </svelte:fragment>
-  </Button>
-</Tooltip>
+<Button
+  label={selectedItems.length === 0 ? presentation.string.Spaces : undefined}
+  width={width ?? 'min-content'}
+  {kind}
+  {size}
+  {justify}
+  on:click={addSpace}
+  showTooltip={{ label: label, direction: labelDirection }}
+>
+  <svelte:fragment slot="content">
+    {#if selectedItems.length > 0}
+      <div class="flex-row-center flex-nowrap">
+        {#await translate(presentation.string.NumberSpaces, { count: selectedItems.length }) then text}
+          <span class="overflow-label disabled ml-1-5">{text}</span>
+        {/await}
+      </div>
+    {/if}
+  </svelte:fragment>
+</Button>
diff --git a/packages/presentation/src/components/SpaceSelect.svelte b/packages/presentation/src/components/SpaceSelect.svelte
index c07590f96f..1269764977 100644
--- a/packages/presentation/src/components/SpaceSelect.svelte
+++ b/packages/presentation/src/components/SpaceSelect.svelte
@@ -23,7 +23,6 @@
     Button,
     eventToHTMLElement,
     getFocusManager,
-    Tooltip,
     TooltipAlignment,
     ButtonKind,
     ButtonSize
@@ -84,10 +83,18 @@
   }
 </script>
 
-<Tooltip {label} fill={false} direction={labelDirection}>
-  <Button {focus} {focusIndex} icon={IconFolder} {size} {kind} {justify} {width} on:click={showSpacesPopup}>
-    <span slot="content" class="overflow-label disabled text-sm">
-      {#if selected}{selected.name}{:else}<Label {label} />{/if}
-    </span>
-  </Button>
-</Tooltip>
+<Button
+  {focus}
+  {focusIndex}
+  icon={IconFolder}
+  {size}
+  {kind}
+  {justify}
+  {width}
+  showTooltip={{ label, direction: labelDirection }}
+  on:click={showSpacesPopup}
+>
+  <span slot="content" class="overflow-label disabled text-sm">
+    {#if selected}{selected.name}{:else}<Label {label} />{/if}
+  </span>
+</Button>
diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte
index 59524232c1..029de077de 100644
--- a/packages/presentation/src/components/SpacesMultiPopup.svelte
+++ b/packages/presentation/src/components/SpacesMultiPopup.svelte
@@ -18,7 +18,7 @@
   import { createEventDispatcher, onMount } from 'svelte'
 
   import core, { Class, getCurrentAccount, Ref, Space } from '@anticrm/core'
-  import { Tooltip, CheckBox } from '@anticrm/ui'
+  import { tooltip, CheckBox } from '@anticrm/ui'
 
   import { createQuery } from '../utils'
   import presentation from '..'
@@ -111,9 +111,9 @@
           {#if allowDeselect && space._id === selected}
             <div class="check-right pointer-events-none">
               {#if titleDeselect}
-                <Tooltip label={titleDeselect ?? presentation.string.Deselect}>
+                <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
                   <CheckBox checked circle primary />
-                </Tooltip>
+                </div>
               {:else}
                 <CheckBox checked circle primary />
               {/if}
diff --git a/packages/presentation/src/components/UserBoxList.svelte b/packages/presentation/src/components/UserBoxList.svelte
index ab79c59558..48c3369669 100644
--- a/packages/presentation/src/components/UserBoxList.svelte
+++ b/packages/presentation/src/components/UserBoxList.svelte
@@ -17,7 +17,7 @@
   import type { Class, DocumentQuery, Ref } from '@anticrm/core'
   import type { IntlString } from '@anticrm/platform'
   import { ButtonKind, ButtonSize, Label, TooltipAlignment } from '@anticrm/ui'
-  import { Tooltip, showPopup, Button } from '@anticrm/ui'
+  import { showPopup, Button } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation, { CombineAvatars, UsersPopup } from '..'
   import { createQuery } from '../utils'
@@ -69,25 +69,24 @@
   }
 </script>
 
-<Tooltip {label} fill={width === '100%'} direction={labelDirection}>
-  <Button
-    icon={persons.length === 0 ? Members : undefined}
-    label={persons.length === 0 ? presentation.string.Members : undefined}
-    width={width ?? 'min-content'}
-    {kind}
-    {size}
-    {justify}
-    on:click={addPerson}
-  >
-    <svelte:fragment slot="content">
-      {#if persons.length > 0}
-        <div class="flex-row-center flex-nowrap pointer-events-none">
-          <CombineAvatars {_class} bind:items size={'inline'} />
-          <span class="overflow-label ml-1-5">
-            <Label label={presentation.string.NumberMembers} params={{ count: persons.length }} />
-          </span>
-        </div>
-      {/if}
-    </svelte:fragment>
-  </Button>
-</Tooltip>
+<Button
+  icon={persons.length === 0 ? Members : undefined}
+  label={persons.length === 0 ? presentation.string.Members : undefined}
+  width={width ?? 'min-content'}
+  {kind}
+  {size}
+  {justify}
+  showTooltip={{ label, direction: labelDirection }}
+  on:click={addPerson}
+>
+  <svelte:fragment slot="content">
+    {#if persons.length > 0}
+      <div class="flex-row-center flex-nowrap pointer-events-none">
+        <CombineAvatars {_class} bind:items size={'inline'} />
+        <span class="overflow-label ml-1-5">
+          <Label label={presentation.string.NumberMembers} params={{ count: persons.length }} />
+        </span>
+      </div>
+    {/if}
+  </svelte:fragment>
+</Button>
diff --git a/packages/text-editor/src/components/EmojiPopup.svelte b/packages/text-editor/src/components/EmojiPopup.svelte
index fee9f40e88..bf8bc43142 100644
--- a/packages/text-editor/src/components/EmojiPopup.svelte
+++ b/packages/text-editor/src/components/EmojiPopup.svelte
@@ -2,8 +2,7 @@
   import emojiRegex from 'emoji-regex'
   import { createEventDispatcher } from 'svelte'
   import { IntlString } from '@anticrm/platform'
-  import { AnySvelteComponent, Label } from '@anticrm/ui'
-  import Tooltip from '@anticrm/ui/src/components/Tooltip.svelte'
+  import { AnySvelteComponent, Label, tooltip } from '@anticrm/ui'
   import Emoji from './icons/Emoji.svelte'
   import Food from './icons/Food.svelte'
   import Nature from './icons/Nature.svelte'
@@ -137,15 +136,14 @@
 <div class="antiPopup antiPopup-withHeader pb-3 popup">
   <div class="flex-between ml-4 pt-2 pb-2 mr-4 header">
     {#each categories as category}
-      <Tooltip label={category.label}>
-        <div
-          class="flex-grow pt-2 pb-2 pl-2 pr-2 element"
-          class:selected={currentCategory === category}
-          on:click={() => handleScrollToCategory(category.id)}
-        >
-          <svelte:component this={category.icon} size={'large'} opacity={currentCategory === category ? '1' : '0.3'} />
-        </div>
-      </Tooltip>
+      <div
+        use:tooltip={{ label: category.label }}
+        class="flex-grow pt-2 pb-2 pl-2 pr-2 element"
+        class:selected={currentCategory === category}
+        on:click={() => handleScrollToCategory(category.id)}
+      >
+        <svelte:component this={category.icon} size={'large'} opacity={currentCategory === category ? '1' : '0.3'} />
+      </div>
     {/each}
   </div>
   <div class="flex-col vScroll" bind:this={div} on:scroll={handleScroll}>
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index a1a55c6aa4..5d97ce5ff6 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Asset, getResource, IntlString } from '@anticrm/platform'
   import presentation, { getClient, ObjectSearchCategory } from '@anticrm/presentation'
-  import { AnySvelteComponent, Icon, Button, Tooltip, showPopup } from '@anticrm/ui'
+  import { AnySvelteComponent, Icon, Button, showPopup } from '@anticrm/ui'
   import { AnyExtension } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
   import { Completion } from '../Completion'
@@ -214,91 +214,82 @@
 <div class="ref-container">
   {#if isFormatting}
     <div class="formatPanel buttons-group xsmall-gap" class:withoutTopBorder>
-      <Tooltip label={textEditorPlugin.string.Bold}>
-        <Button
-          icon={Bold}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('bold')}
-          on:click={getToggler(textEditor.toggleBold)}
-        />
-      </Tooltip>
-      <Tooltip label={textEditorPlugin.string.Italic}>
-        <Button
-          icon={Italic}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('italic')}
-          on:click={getToggler(textEditor.toggleItalic)}
-        />
-      </Tooltip>
-      <Tooltip label={textEditorPlugin.string.Strikethrough}>
-        <Button
-          icon={Strikethrough}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('strike')}
-          on:click={getToggler(textEditor.toggleStrike)}
-        />
-      </Tooltip>
-      <Tooltip label={textEditorPlugin.string.Link}>
-        <Button
-          icon={Link}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('link')}
-          disabled={isSelectionEmpty && !activeModes.has('link')}
-          on:click={formatLink}
-        />
-      </Tooltip>
+      <Button
+        icon={Bold}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('bold')}
+        showTooltip={{ label: textEditorPlugin.string.Bold }}
+        on:click={getToggler(textEditor.toggleBold)}
+      />
+      <Button
+        icon={Italic}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('italic')}
+        showTooltip={{ label: textEditorPlugin.string.Italic }}
+        on:click={getToggler(textEditor.toggleItalic)}
+      />
+      <Button
+        icon={Strikethrough}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('strike')}
+        showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
+        on:click={getToggler(textEditor.toggleStrike)}
+      />
+      <Button
+        icon={Link}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('link')}
+        disabled={isSelectionEmpty && !activeModes.has('link')}
+        showTooltip={{ label: textEditorPlugin.string.Link }}
+        on:click={formatLink}
+      />
       <div class="buttons-divider" />
-      <Tooltip label={textEditorPlugin.string.OrderedList}>
-        <Button
-          icon={ListNumber}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('orderedList')}
-          on:click={getToggler(textEditor.toggleOrderedList)}
-        />
-      </Tooltip>
-      <Tooltip label={textEditorPlugin.string.BulletedList}>
-        <Button
-          icon={ListBullet}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('bulletList')}
-          on:click={getToggler(textEditor.toggleBulletList)}
-        />
-      </Tooltip>
+      <Button
+        icon={ListNumber}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('orderedList')}
+        showTooltip={{ label: textEditorPlugin.string.OrderedList }}
+        on:click={getToggler(textEditor.toggleOrderedList)}
+      />
+      <Button
+        icon={ListBullet}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('bulletList')}
+        showTooltip={{ label: textEditorPlugin.string.BulletedList }}
+        on:click={getToggler(textEditor.toggleBulletList)}
+      />
       <div class="buttons-divider" />
-      <Tooltip label={textEditorPlugin.string.Blockquote}>
-        <Button
-          icon={Quote}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('blockquote')}
-          on:click={getToggler(textEditor.toggleBlockquote)}
-        />
-      </Tooltip>
+      <Button
+        icon={Quote}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('blockquote')}
+        showTooltip={{ label: textEditorPlugin.string.Blockquote }}
+        on:click={getToggler(textEditor.toggleBlockquote)}
+      />
       <div class="buttons-divider" />
-      <Tooltip label={textEditorPlugin.string.Code}>
-        <Button
-          icon={Code}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('code')}
-          on:click={getToggler(textEditor.toggleCode)}
-        />
-      </Tooltip>
-      <Tooltip label={textEditorPlugin.string.CodeBlock}>
-        <Button
-          icon={CodeBlock}
-          kind={'transparent'}
-          size={'small'}
-          selected={activeModes.has('codeBlock')}
-          on:click={getToggler(textEditor.toggleCodeBlock)}
-        />
-      </Tooltip>
+      <Button
+        icon={Code}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('code')}
+        showTooltip={{ label: textEditorPlugin.string.Code }}
+        on:click={getToggler(textEditor.toggleCode)}
+      />
+      <Button
+        icon={CodeBlock}
+        kind={'transparent'}
+        size={'small'}
+        selected={activeModes.has('codeBlock')}
+        showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
+        on:click={getToggler(textEditor.toggleCodeBlock)}
+      />
     </div>
   {/if}
   <div class="textInput" class:withoutTopBorder={withoutTopBorder || isFormatting}>
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index de451c890e..759dceeeb9 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -17,7 +17,7 @@
   import type { AnySvelteComponent, TooltipAlignment } from '../types'
 
   import Icon from './Icon.svelte'
-  import Tooltip from './Tooltip.svelte'
+  import { tooltip } from '../tooltips'
 
   export let label: IntlString = '' as IntlString
   export let labelProps: any = undefined
@@ -28,13 +28,16 @@
   export let invisible: boolean = false
 </script>
 
-<Tooltip {label} {direction} props={labelProps}>
-  <button class="button {size}" on:click|stopPropagation={action}>
-    <div class="icon {size}" class:invisible>
-      <Icon {icon} {size} />
-    </div>
-  </button>
-</Tooltip>
+<button
+  class="button {size}"
+  use:tooltip={{ label, direction, props: labelProps }}
+  tabindex="0"
+  on:click|stopPropagation={action}
+>
+  <div class="icon {size}" class:invisible>
+    <Icon {icon} {size} />
+  </div>
+</button>
 
 <style lang="scss">
   .button {
diff --git a/packages/ui/src/components/Dropdown.svelte b/packages/ui/src/components/Dropdown.svelte
index 8aa1928bc3..56748a5109 100644
--- a/packages/ui/src/components/Dropdown.svelte
+++ b/packages/ui/src/components/Dropdown.svelte
@@ -20,7 +20,6 @@
   import Button from './Button.svelte'
   import DropdownPopup from './DropdownPopup.svelte'
   import Label from './Label.svelte'
-  import Tooltip from './Tooltip.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString | undefined = undefined
@@ -42,28 +41,27 @@
 </script>
 
 <div bind:this={container} class="min-w-0">
-  <Tooltip {label} fill={width === '100%'} direction={labelDirection}>
-    <Button
-      {focusIndex}
-      {icon}
-      width={width ?? 'min-content'}
-      {size}
-      {kind}
-      {justify}
-      on:click={() => {
-        if (!opened) {
-          opened = true
-          showPopup(DropdownPopup, { title: label, items, icon }, container, (result) => {
-            if (result) selected = result
-            opened = false
-            mgr?.setFocusPos(focusIndex)
-          })
-        }
-      }}
-    >
-      <span slot="content" class="overflow-label disabled">
-        {#if selected}{selected.label}{:else}<Label label={placeholder} />{/if}
-      </span>
-    </Button>
-  </Tooltip>
+  <Button
+    {focusIndex}
+    {icon}
+    width={width ?? 'min-content'}
+    {size}
+    {kind}
+    {justify}
+    showTooltip={{ label, direction: labelDirection }}
+    on:click={() => {
+      if (!opened) {
+        opened = true
+        showPopup(DropdownPopup, { title: label, items, icon }, container, (result) => {
+          if (result) selected = result
+          opened = false
+          mgr?.setFocusPos(focusIndex)
+        })
+      }
+    }}
+  >
+    <span slot="content" class="overflow-label disabled">
+      {#if selected}{selected.label}{:else}<Label label={placeholder} />{/if}
+    </span>
+  </Button>
 </div>
diff --git a/packages/ui/src/components/DropdownLabels.svelte b/packages/ui/src/components/DropdownLabels.svelte
index b7eaac3742..0ba08db669 100644
--- a/packages/ui/src/components/DropdownLabels.svelte
+++ b/packages/ui/src/components/DropdownLabels.svelte
@@ -22,7 +22,6 @@
   import Button from './Button.svelte'
   import DropdownLabelsPopup from './DropdownLabelsPopup.svelte'
   import Label from './Label.svelte'
-  import Tooltip from './Tooltip.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString
@@ -54,31 +53,30 @@
 </script>
 
 <div bind:this={container} class="min-w-0">
-  <Tooltip {label} fill={width === '100%'} direction={labelDirection}>
-    <Button
-      {focusIndex}
-      {icon}
-      width={width ?? 'min-content'}
-      {size}
-      {kind}
-      {justify}
-      on:click={() => {
-        if (!opened) {
-          opened = true
-          showPopup(DropdownLabelsPopup, { placeholder, items, selected }, container, (result) => {
-            if (result) {
-              selected = result
-              dispatch('selected', result)
-            }
-            opened = false
-            mgr?.setFocusPos(focusIndex)
-          })
-        }
-      }}
-    >
-      <span slot="content" class="overflow-label disabled">
-        {#if selectedItem}{selectedItem.label}{:else}<Label label={label ?? ui.string.NotSelected} />{/if}
-      </span>
-    </Button>
-  </Tooltip>
+  <Button
+    {focusIndex}
+    {icon}
+    width={width ?? 'min-content'}
+    {size}
+    {kind}
+    {justify}
+    showTooltip={{ label, direction: labelDirection }}
+    on:click={() => {
+      if (!opened) {
+        opened = true
+        showPopup(DropdownLabelsPopup, { placeholder, items, selected }, container, (result) => {
+          if (result) {
+            selected = result
+            dispatch('selected', result)
+          }
+          opened = false
+          mgr?.setFocusPos(focusIndex)
+        })
+      }
+    }}
+  >
+    <span slot="content" class="overflow-label disabled">
+      {#if selectedItem}{selectedItem.label}{:else}<Label label={label ?? ui.string.NotSelected} />{/if}
+    </span>
+  </Button>
 </div>
diff --git a/packages/ui/src/components/DropdownLabelsIntl.svelte b/packages/ui/src/components/DropdownLabelsIntl.svelte
index 6e7d3086e8..6c296f9564 100644
--- a/packages/ui/src/components/DropdownLabelsIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsIntl.svelte
@@ -21,7 +21,6 @@
   import Button from './Button.svelte'
   import DropdownLabelsPopupIntl from './DropdownLabelsPopupIntl.svelte'
   import Label from './Label.svelte'
-  import Tooltip from './Tooltip.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString
@@ -48,33 +47,32 @@
 </script>
 
 <div bind:this={container} class="min-w-0">
-  <Tooltip {label} fill={width === '100%'} direction={labelDirection}>
-    <Button
-      {icon}
-      width={width ?? 'min-content'}
-      {size}
-      {kind}
-      {justify}
-      on:click={() => {
-        if (!opened) {
-          opened = true
-          showPopup(DropdownLabelsPopupIntl, { placeholder, items, selected }, container, (result) => {
-            if (result) {
-              selected = result
-              dispatch('selected', result)
-            }
-            opened = false
-          })
-        }
-      }}
-    >
-      <span slot="content" class="overflow-label disabled">
-        {#if selectedItem}
-          <Label label={selectedItem.label} />
-        {:else}
-          <Label label={label ?? ui.string.NotSelected} />
-        {/if}
-      </span>
-    </Button>
-  </Tooltip>
+  <Button
+    {icon}
+    width={width ?? 'min-content'}
+    {size}
+    {kind}
+    {justify}
+    showTooltip={{ label, direction: labelDirection }}
+    on:click={() => {
+      if (!opened) {
+        opened = true
+        showPopup(DropdownLabelsPopupIntl, { placeholder, items, selected }, container, (result) => {
+          if (result) {
+            selected = result
+            dispatch('selected', result)
+          }
+          opened = false
+        })
+      }
+    }}
+  >
+    <span slot="content" class="overflow-label disabled">
+      {#if selectedItem}
+        <Label label={selectedItem.label} />
+      {:else}
+        <Label label={label ?? ui.string.NotSelected} />
+      {/if}
+    </span>
+  </Button>
 </div>
diff --git a/packages/ui/src/components/ErrorPresenter.svelte b/packages/ui/src/components/ErrorPresenter.svelte
index ad82a257bf..77b9eadf85 100644
--- a/packages/ui/src/components/ErrorPresenter.svelte
+++ b/packages/ui/src/components/ErrorPresenter.svelte
@@ -14,12 +14,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import Tooltip from './Tooltip.svelte'
+  import { tooltip } from '../tooltips'
   import ErrorPopup from './ErrorPopup.svelte'
   export let error: any
 </script>
 
-<Tooltip component={ErrorPopup} props={{ error: error }}>
+<div use:tooltip={{ component: ErrorPopup, props: { error: error } }}>
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="10" cy="10" r="7.275" stroke="#EE7A7A" stroke-width="1.2" />
     <path
@@ -29,4 +29,4 @@
       stroke-width="0.2"
     />
   </svg>
-</Tooltip>
+</div>
diff --git a/packages/ui/src/tooltips.ts b/packages/ui/src/tooltips.ts
index c4b6afca66..f77b367cdf 100644
--- a/packages/ui/src/tooltips.ts
+++ b/packages/ui/src/tooltips.ts
@@ -1,6 +1,6 @@
 import { IntlString } from '@anticrm/platform'
 import { writable } from 'svelte/store'
-import { AnyComponent, AnySvelteComponent, LabelAndProps, TooltipAlignment } from './types'
+import type { AnyComponent, AnySvelteComponent, LabelAndProps, TooltipAlignment } from './types'
 
 const emptyTooltip: LabelAndProps = {
   label: undefined,
@@ -42,6 +42,10 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any {
   return {
     update (options: LabelAndProps) {
       opt = options
+      const shown = !!(storedValue.label !== undefined || storedValue.component !== undefined)
+      if (shown) {
+        showTooltip(opt.label, node, opt.direction, opt.component, opt.props, opt.anchor, opt.onUpdate, opt.kind)
+      }
     },
 
     destroy () {
diff --git a/plugins/calendar-resources/src/components/DocReminder.svelte b/plugins/calendar-resources/src/components/DocReminder.svelte
index 8ed4be3875..79afe2a993 100644
--- a/plugins/calendar-resources/src/components/DocReminder.svelte
+++ b/plugins/calendar-resources/src/components/DocReminder.svelte
@@ -16,7 +16,7 @@
   import { EmployeeAccount } from '@anticrm/contact'
   import { Doc, getCurrentAccount } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
-  import { Button, showPopup, Tooltip } from '@anticrm/ui'
+  import { Button, showPopup } from '@anticrm/ui'
   import calendar from '../plugin'
   import CreateReminder from './CreateReminder.svelte'
   import DocRemindersPopup from './DocRemindersPopup.svelte'
@@ -57,6 +57,10 @@
   }
 </script>
 
-<Tooltip label={isEvent ? calendar.string.RemindMeAt : calendar.string.Reminders}>
-  <Button size={'medium'} kind={'transparent'} icon={calendar.icon.Reminder} on:click={(e) => click(e)} />
-</Tooltip>
+<Button
+  size={'medium'}
+  kind={'transparent'}
+  icon={calendar.icon.Reminder}
+  showTooltip={{ label: isEvent ? calendar.string.RemindMeAt : calendar.string.Reminders }}
+  on:click={(e) => click(e)}
+/>
diff --git a/plugins/calendar-resources/src/components/PersonsPresenter.svelte b/plugins/calendar-resources/src/components/PersonsPresenter.svelte
index e885c40b9c..e5e33c4510 100644
--- a/plugins/calendar-resources/src/components/PersonsPresenter.svelte
+++ b/plugins/calendar-resources/src/components/PersonsPresenter.svelte
@@ -18,7 +18,7 @@
   import { Hierarchy } from '@anticrm/core'
   import { Avatar } from '@anticrm/presentation'
   import calendar from '../plugin'
-  import { showPanel, Tooltip } from '@anticrm/ui'
+  import { showPanel, tooltip } from '@anticrm/ui'
   import view from '@anticrm/view'
 
   export let value: Person | Person[]
@@ -35,13 +35,16 @@
 {#if value}
   <div class="flex persons">
     {#each persons as p}
-      <Tooltip label={calendar.string.PersonsLabel} props={{ name: formatName(p.name) }}>
-        <div class="flex-presenter" class:inline-presenter={inline} on:click={() => onClick(p)}>
-          <div class="icon">
-            <Avatar size={'x-small'} avatar={p.avatar} />
-          </div>
+      <div
+        class="flex-presenter"
+        class:inline-presenter={inline}
+        use:tooltip={{ label: calendar.string.PersonsLabel, props: { name: formatName(p.name) } }}
+        on:click={() => onClick(p)}
+      >
+        <div class="icon">
+          <Avatar size={'x-small'} avatar={p.avatar} />
         </div>
-      </Tooltip>
+      </div>
     {/each}
   </div>
 {/if}
diff --git a/plugins/calendar-resources/src/components/ReminderPresenter.svelte b/plugins/calendar-resources/src/components/ReminderPresenter.svelte
index 9ade033b1a..f0f2f54790 100644
--- a/plugins/calendar-resources/src/components/ReminderPresenter.svelte
+++ b/plugins/calendar-resources/src/components/ReminderPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Reminder } from '@anticrm/calendar'
   import { getResource } from '@anticrm/platform'
-  import { DateTimeRangePresenter, showPanel, Tooltip } from '@anticrm/ui'
+  import { DateTimeRangePresenter, showPanel, tooltip } from '@anticrm/ui'
   import view from '@anticrm/view'
 
   export let value: Reminder
@@ -29,13 +29,14 @@
 
 <div class="antiSelect w-full cursor-pointer flex-between" on:click={click}>
   {#if value}
-    <div class="mr-4">
-      {#await objectPresenter then component}
-        <Tooltip {component} props={{ objectId: value.attachedTo, _class: value.attachedToClass }}>
-          {value.title}
-        </Tooltip>
-      {/await}
-    </div>
+    {#await objectPresenter then component}
+      <div
+        class="mr-4"
+        use:tooltip={{ component, props: { objectId: value.attachedTo, _class: value.attachedToClass } }}
+      >
+        {value.title}
+      </div>
+    {/await}
     <DateTimeRangePresenter value={value.date + value.shift} />
   {/if}
 </div>
diff --git a/plugins/chunter-resources/src/components/Message.svelte b/plugins/chunter-resources/src/components/Message.svelte
index 8c43897f51..3444820441 100644
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@@ -28,7 +28,7 @@
     Menu,
     showPopup,
     Label,
-    Tooltip,
+    tooltip,
     Button,
     getCurrentLocation,
     locationToUrl
@@ -255,10 +255,8 @@
       {/if}
       <span>{getTime(message.createOn)}</span>
       {#if message.editedOn}
-        <span>
-          <Tooltip label={ui.string.TimeTooltip} props={{ value: getTime(message.editedOn) }}>
-            <Label label={chunter.string.Edited} />
-          </Tooltip>
+        <span use:tooltip={{ label: ui.string.TimeTooltip, props: { value: getTime(message.editedOn) } }}>
+          <Label label={chunter.string.Edited} />
         </span>
       {/if}
     </div>
diff --git a/plugins/chunter-resources/src/components/Reactions.svelte b/plugins/chunter-resources/src/components/Reactions.svelte
index 86fc92aa6d..140b3d442b 100644
--- a/plugins/chunter-resources/src/components/Reactions.svelte
+++ b/plugins/chunter-resources/src/components/Reactions.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Reaction } from '@anticrm/chunter'
   import { Account, Ref } from '@anticrm/core'
-  import { Tooltip } from '@anticrm/ui'
+  import { tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import ReactionsTooltip from './ReactionsTooltip.svelte'
 
@@ -38,17 +38,16 @@
 <div class="container">
   {#each [...reactionsAccounts] as [emoji, accounts]}
     <div class="reaction over-underline">
-      <Tooltip component={ReactionsTooltip} props={{ reactionAccounts: accounts }}>
-        <div
-          class="flex-row-center"
-          on:click={() => {
-            dispatch('remove', emoji)
-          }}
-        >
-          <div>{emoji}</div>
-          <div class="caption-color counter">{accounts.length}</div>
-        </div>
-      </Tooltip>
+      <div
+        class="flex-row-center"
+        use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
+        on:click={() => {
+          dispatch('remove', emoji)
+        }}
+      >
+        <div>{emoji}</div>
+        <div class="caption-color counter">{accounts.length}</div>
+      </div>
     </div>
   {/each}
 </div>
diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
index 79b2be1e83..0c366daa70 100644
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@@ -30,8 +30,7 @@
     eventToHTMLElement,
     getFocusManager,
     Menu,
-    showPopup,
-    Tooltip
+    showPopup
   } from '@anticrm/ui'
   import { createEventDispatcher, tick } from 'svelte'
   import { getChannelProviders } from '../utils'
@@ -275,18 +274,17 @@
         on:click={showMenu}
       />
     {:else}
-      <Tooltip label={presentation.string.AddSocialLinks}>
-        <Button
-          focusIndex={focusIndex === -1 ? focusIndex : focusIndex + 2 + displayItems.length}
-          id={presentation.string.AddSocialLinks}
-          bind:input={addBtn}
-          icon={contact.icon.SocialEdit}
-          {kind}
-          {size}
-          {shape}
-          on:click={showMenu}
-        />
-      </Tooltip>
+      <Button
+        focusIndex={focusIndex === -1 ? focusIndex : focusIndex + 2 + displayItems.length}
+        id={presentation.string.AddSocialLinks}
+        bind:input={addBtn}
+        icon={contact.icon.SocialEdit}
+        {kind}
+        {size}
+        {shape}
+        showTooltip={{ label: presentation.string.AddSocialLinks }}
+        on:click={showMenu}
+      />
     {/if}
   {/if}
 </div>
diff --git a/plugins/contact-resources/src/components/ChannelsView.svelte b/plugins/contact-resources/src/components/ChannelsView.svelte
index ba28b4e7fd..1a5bdff172 100644
--- a/plugins/contact-resources/src/components/ChannelsView.svelte
+++ b/plugins/contact-resources/src/components/ChannelsView.svelte
@@ -18,7 +18,7 @@
   import type { AttachedData, Doc, Ref, Timestamp } from '@anticrm/core'
   import type { Asset, IntlString } from '@anticrm/platform'
   import type { AnyComponent } from '@anticrm/ui'
-  import { CircleButton, Tooltip } from '@anticrm/ui'
+  import { Button } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import { getChannelProviders } from '../utils'
   import ChannelsPopup from './ChannelsPopup.svelte'
@@ -109,16 +109,16 @@
 >
   {#each displayItems as item}
     <div class="channel-item">
-      <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
-        <CircleButton
-          icon={item.icon}
-          {size}
-          primary={item.integration || item.notification}
-          on:click={() => {
-            dispatch('click', item)
-          }}
-        />
-      </Tooltip>
+      <Button
+        icon={item.icon}
+        kind={'link-bordered'}
+        {size}
+        highlight={item.integration || item.notification}
+        showTooltip={{ component: ChannelsPopup, props: { value: item }, label: undefined, anchor: divHTML }}
+        on:click={() => {
+          dispatch('click', item)
+        }}
+      />
     </div>
   {/each}
 </div>
diff --git a/plugins/contact-resources/src/components/EmployeePresenter.svelte b/plugins/contact-resources/src/components/EmployeePresenter.svelte
index c1acd432b0..4c658e6f67 100644
--- a/plugins/contact-resources/src/components/EmployeePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeePresenter.svelte
@@ -6,9 +6,17 @@
   import EmployeePreviewPopup from './EmployeePreviewPopup.svelte'
   import { WithLookup } from '@anticrm/core'
   import { IntlString } from '@anticrm/platform'
+  import type { AnyComponent, AnySvelteComponent } from '@anticrm/ui'
 
   export let value: WithLookup<Employee> | null | undefined
-  export let tooltipLabels: { personLabel: IntlString; placeholderLabel?: IntlString } | undefined = undefined
+  export let tooltipLabels:
+    | {
+        personLabel?: IntlString
+        placeholderLabel?: IntlString
+        component?: AnySvelteComponent | AnyComponent
+        props?: any
+      }
+    | undefined = undefined
   export let shouldShowAvatar: boolean = true
   export let shouldShowName: boolean = true
   export let shouldShowPlaceholder = false
diff --git a/plugins/contact-resources/src/components/EmployeeStatusDueDatePresenter.svelte b/plugins/contact-resources/src/components/EmployeeStatusDueDatePresenter.svelte
index f8871530fa..37ded2e827 100644
--- a/plugins/contact-resources/src/components/EmployeeStatusDueDatePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeStatusDueDatePresenter.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Timestamp, TypeDate } from '@anticrm/core'
-  import { ticker, Tooltip } from '@anticrm/ui'
+  import { ticker, tooltip } from '@anticrm/ui'
   import { DateEditor } from '@anticrm/view-resources'
   import EmployeeStatusDueDatePopup from './EmployeeStatusDueDatePopup.svelte'
   import { formatDate } from '../utils'
@@ -15,13 +15,9 @@
   const type = { withTime: true } as TypeDate
 </script>
 
-<Tooltip
-  direction={'top'}
-  component={EmployeeStatusDueDatePopup}
-  props={{
-    formattedDate,
-    isOverdue
-  }}
+<div
+  class="clear-mins"
+  use:tooltip={{ direction: 'top', component: EmployeeStatusDueDatePopup, props: { formattedDate, isOverdue } }}
 >
   <DateEditor
     value={statusDueDate}
@@ -31,4 +27,4 @@
       dispatch('change', v)
     }}
   />
-</Tooltip>
+</div>
diff --git a/plugins/contact-resources/src/components/EmployeeStatusPresenter.svelte b/plugins/contact-resources/src/components/EmployeeStatusPresenter.svelte
index b30b09b5bf..5230b1c5b9 100644
--- a/plugins/contact-resources/src/components/EmployeeStatusPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeStatusPresenter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Employee, Status } from '@anticrm/contact'
   import { WithLookup } from '@anticrm/core'
-  import { Label, Tooltip } from '@anticrm/ui'
+  import { Label, tooltip } from '@anticrm/ui'
   import contact from '../plugin'
   import { formatDate } from '../utils'
   import { IntlString } from '@anticrm/platform'
@@ -15,12 +15,15 @@
 
 {#if status}
   {#if withTooltip}
-    <Tooltip
-      label={status.dueDate ? contact.string.StatusDueDateTooltip : contact.string.NoExpire}
-      props={{ date: formattedDate }}
+    <div
+      class="overflow-label statusName"
+      use:tooltip={{
+        label: status.dueDate ? contact.string.StatusDueDateTooltip : contact.string.NoExpire,
+        props: { date: formattedDate }
+      }}
     >
-      <div class="overflow-label statusName">{status.name}</div>
-    </Tooltip>
+      {status.name}
+    </div>
   {:else}
     <div class="flex">
       <div class="pr-4">{status.name}</div>
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index f507c5dd40..8a5c9abfa3 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -16,6 +16,7 @@
   import { formatName, Person } from '@anticrm/contact'
   import { IntlString } from '@anticrm/platform'
   import PersonContent from './PersonContent.svelte'
+  import type { AnyComponent, AnySvelteComponent } from '@anticrm/ui'
 
   export let value: Person | null | undefined
   export let inline = false
@@ -24,7 +25,14 @@
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
   export let defaultName: IntlString | undefined = undefined
-  export let tooltipLabels: { personLabel: IntlString; placeholderLabel?: IntlString } | undefined = undefined
+  export let tooltipLabels:
+    | {
+        personLabel?: IntlString
+        placeholderLabel?: IntlString
+        component?: AnySvelteComponent | AnyComponent
+        props?: any
+      }
+    | undefined = undefined
   export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
 </script>
@@ -33,8 +41,9 @@
   <PersonContent
     showTooltip={tooltipLabels
       ? {
-          label: value ? tooltipLabels.personLabel : tooltipLabels.placeholderLabel,
-          props: value ? { value: formatName(value.name) } : {}
+          label: value ? tooltipLabels.personLabel : undefined,
+          component: value ? tooltipLabels.component : undefined,
+          props: value && tooltipLabels.personLabel ? { value: formatName(value.name) } : tooltipLabels.props
         }
       : undefined}
     {value}
diff --git a/plugins/devmodel-resources/src/components/ModelView.svelte b/plugins/devmodel-resources/src/components/ModelView.svelte
index 07b0c95a5b..6792343031 100644
--- a/plugins/devmodel-resources/src/components/ModelView.svelte
+++ b/plugins/devmodel-resources/src/components/ModelView.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import core, { Doc, TxCUD } from '@anticrm/core'
   import { createQuery } from '@anticrm/presentation'
-  import { ScrollBox, Tooltip } from '@anticrm/ui'
+  import { ScrollBox, tooltip } from '@anticrm/ui'
   import { toIntl } from '..'
   import ContentPopup from './ContentPopup.svelte'
 
@@ -49,7 +49,9 @@
             <td>{tx.objectId}</td>
             <td>{tx.objectClass}</td>
             <td>
-              <Tooltip label={toIntl('Content')} component={ContentPopup} props={{ content: tx }}>Content</Tooltip>
+              <span use:tooltip={{ label: toIntl('Content'), component: ContentPopup, props: { content: tx } }}>
+                Content
+              </span>
             </td>
           </tr>
         {/each}
diff --git a/plugins/devmodel-resources/src/components/QueryView.svelte b/plugins/devmodel-resources/src/components/QueryView.svelte
index 6ccfa37971..e3bcd71e35 100644
--- a/plugins/devmodel-resources/src/components/QueryView.svelte
+++ b/plugins/devmodel-resources/src/components/QueryView.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { ScrollBox, Tooltip } from '@anticrm/ui'
+  import { ScrollBox, tooltip } from '@anticrm/ui'
   import ActionIcon from '@anticrm/ui/src/components/ActionIcon.svelte'
   import view from '@anticrm/view'
   import { queries, toIntl } from '..'
@@ -44,9 +44,9 @@
             <td>{JSON.stringify(q.options ?? {})}</td>
             <td>{q.result.length}</td>
             <td>
-              <Tooltip label={toIntl('Content')} component={ContentPopup} props={{ content: q.result }}>
+              <span use:tooltip={{ label: toIntl('Content'), component: ContentPopup, props: { content: q.result } }}>
                 Results
-              </Tooltip>
+              </span>
             </td>
             <td>
               <ActionIcon
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index c8d96e994a..f21dafb97b 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -19,7 +19,7 @@
   import gmail from '../plugin'
   import { Channel, Contact, EmployeeAccount, formatName } from '@anticrm/contact'
   import contact from '@anticrm/contact'
-  import plugin, { IconShare, Button, Tooltip, Icon, Label, Scroller } from '@anticrm/ui'
+  import plugin, { IconShare, Button, Icon, Label, Scroller } from '@anticrm/ui'
   import { getCurrentAccount, Ref, SortingOrder, Space } from '@anticrm/core'
   import setting from '@anticrm/setting'
   import Messages from './Messages.svelte'
@@ -144,15 +144,14 @@
             newMessage = true
           }}
         />
-        <Tooltip label={gmail.string.ShareMessages}>
-          <Button
-            icon={IconShare}
-            kind={'transparent'}
-            on:click={async () => {
-              selectable = !selectable
-            }}
-          />
-        </Tooltip>
+        <Button
+          icon={IconShare}
+          kind={'transparent'}
+          showTooltip={{ label: gmail.string.ShareMessages }}
+          on:click={async () => {
+            selectable = !selectable
+          }}
+        />
       </div>
     {/if}
   </div>
diff --git a/plugins/lead-resources/src/components/LeadsPresenter.svelte b/plugins/lead-resources/src/components/LeadsPresenter.svelte
index 29232ba166..b6f563ca5c 100644
--- a/plugins/lead-resources/src/components/LeadsPresenter.svelte
+++ b/plugins/lead-resources/src/components/LeadsPresenter.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import type { Customer } from '@anticrm/lead'
-  import { Icon, Tooltip } from '@anticrm/ui'
+  import { Icon, tooltip } from '@anticrm/ui'
   import LeadsPopup from './LeadsPopup.svelte'
   import leads from '../plugin'
 
@@ -24,9 +24,10 @@
 </script>
 
 {#if value && value > 0}
-  <Tooltip label={leads.string.Leads} component={LeadsPopup} props={{ value: object }}>
-    <div class="sm-tool-icon">
-      <span class="icon"><Icon icon={leads.icon.Lead} size={'small'} /></span>&nbsp;{value}
-    </div>
-  </Tooltip>
+  <div
+    class="sm-tool-icon"
+    use:tooltip={{ label: leads.string.Leads, component: LeadsPopup, props: { value: object } }}
+  >
+    <span class="icon"><Icon icon={leads.icon.Lead} size={'small'} /></span>&nbsp;{value}
+  </div>
 {/if}
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 905b93cafd..a1a2c5086b 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -22,7 +22,7 @@
   import type { Applicant, Candidate } from '@anticrm/recruit'
   import task, { TodoItem } from '@anticrm/task'
   import { AssigneePresenter } from '@anticrm/task-resources'
-  import { Component, showPanel, Tooltip } from '@anticrm/ui'
+  import { Component, showPanel, tooltip } from '@anticrm/ui'
   import view from '@anticrm/view'
   import ApplicationPresenter from './ApplicationPresenter.svelte'
 
@@ -73,9 +73,16 @@
       <div class="sm-tool-icon step-lr75">
         <ApplicationPresenter value={object} />
         {#if todoItems.length > 0}
-          <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-            <div class="ml-2">( {doneTasks?.length}/ {todoItems.length} )</div>
-          </Tooltip>
+          <div
+            class="ml-2"
+            use:tooltip={{
+              label: task.string.TodoItems,
+              component: task.component.TodoItemsPopup,
+              props: { value: object }
+            }}
+          >
+            ({doneTasks?.length}/{todoItems.length})
+          </div>
         {/if}
       </div>
       {#if (object.attachments ?? 0) > 0}
diff --git a/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte b/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte
index 4d3606e9d0..0a86ad074e 100644
--- a/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte
@@ -15,25 +15,30 @@
 <script lang="ts">
   import { Doc, DocumentQuery, Ref } from '@anticrm/core'
   import { Vacancy } from '@anticrm/recruit'
-  import { Icon, Tooltip } from '@anticrm/ui'
+  import { Icon, tooltip } from '@anticrm/ui'
   import recruit from '../plugin'
   import VacancyApplicationsPopup from './VacancyApplicationsPopup.svelte'
 
   export let value: Vacancy
   export let applications: Map<Ref<Vacancy>, { count: number; modifiedOn: number }> | undefined
   export let resultQuery: DocumentQuery<Doc>
+
+  $: count = applications?.get(value._id)?.count ?? 0
 </script>
 
-{#if (applications?.get(value._id)?.count ?? 0) > 0}
-  <Tooltip
-    label={recruit.string.Applications}
-    component={VacancyApplicationsPopup}
-    props={{ value: value._id, resultQuery }}
+{#if value && count > 0}
+  <div
+    class="sm-tool-icon"
+    use:tooltip={{
+      label: recruit.string.Applications,
+      component: VacancyApplicationsPopup,
+      props: { value: value._id, resultQuery }
+    }}
   >
-    <div class="sm-tool-icon">
-      <span class="icon"><Icon icon={recruit.icon.Application} size={'small'} /></span>&nbsp;{applications?.get(
-        value._id
-      )?.count ?? 0}
+    <div class="icon">
+      <Icon icon={recruit.icon.Application} size={'small'} />
     </div>
-  </Tooltip>
+    &nbsp;
+    {applications?.get(value._id)?.count ?? 0}
+  </div>
 {/if}
diff --git a/plugins/recruit-resources/src/components/YesNo.svelte b/plugins/recruit-resources/src/components/YesNo.svelte
index eeec7f0f80..d5cb9f9029 100644
--- a/plugins/recruit-resources/src/components/YesNo.svelte
+++ b/plugins/recruit-resources/src/components/YesNo.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import type { ButtonKind, ButtonSize, TooltipAlignment } from '@anticrm/ui'
-  import { Button, Label, Tooltip } from '@anticrm/ui'
+  import { Button, Label } from '@anticrm/ui'
 
   export let label: IntlString
   export let tooltip: IntlString
@@ -31,47 +31,46 @@
   export let focusIndex = -1
 </script>
 
-<Tooltip direction={labelDirection} label={tooltip}>
-  <Button
-    {focusIndex}
-    {kind}
-    {size}
-    {justify}
-    {width}
-    {disabled}
-    on:click={() => {
-      if (value === true) value = false
-      else if (value === false) value = undefined
-      else value = true
-    }}
-  >
-    <svelte:fragment slot="content">
-      <div class="flex-row-center flex-no-wrap pointer-events-none">
-        <span class="overflow-label">
-          <Label {label} />
-        </span>
-        <div class="btn-icon ml-1">
-          <svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <circle class="circle" class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6" />
-            {#if value === true}
-              <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 " />
-            {:else if value === false}
-              <polygon
-                fill="#fff"
-                points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "
-              />
-            {:else}
-              <path
-                fill="#fff"
-                d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"
-              />
-            {/if}
-          </svg>
-        </div>
+<Button
+  {focusIndex}
+  {kind}
+  {size}
+  {justify}
+  {width}
+  {disabled}
+  showTooltip={{ label: tooltip, direction: labelDirection }}
+  on:click={() => {
+    if (value === true) value = false
+    else if (value === false) value = undefined
+    else value = true
+  }}
+>
+  <svelte:fragment slot="content">
+    <div class="flex-row-center flex-no-wrap pointer-events-none">
+      <span class="overflow-label">
+        <Label {label} />
+      </span>
+      <div class="btn-icon ml-1">
+        <svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <circle class="circle" class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6" />
+          {#if value === true}
+            <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 " />
+          {:else if value === false}
+            <polygon
+              fill="#fff"
+              points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "
+            />
+          {:else}
+            <path
+              fill="#fff"
+              d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"
+            />
+          {/if}
+        </svg>
       </div>
-    </svelte:fragment>
-  </Button>
-</Tooltip>
+    </div>
+  </svelte:fragment>
+</Button>
 
 <style lang="scss">
   .btn-icon {
diff --git a/plugins/recruit-resources/src/components/review/OpinionsPresenter.svelte b/plugins/recruit-resources/src/components/review/OpinionsPresenter.svelte
index b2b2f56c09..9a86f7f79d 100644
--- a/plugins/recruit-resources/src/components/review/OpinionsPresenter.svelte
+++ b/plugins/recruit-resources/src/components/review/OpinionsPresenter.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import type { Review } from '@anticrm/recruit'
-  import { Icon, Tooltip } from '@anticrm/ui'
+  import { Icon, tooltip } from '@anticrm/ui'
   import OpinionsPopup from './OpinionsPopup.svelte'
   import recruit from '../../plugin'
 
@@ -23,9 +23,10 @@
 </script>
 
 {#if value.opinions && value.opinions > 0}
-  <Tooltip label={recruit.string.Opinions} component={OpinionsPopup} props={{ value }}>
-    <div class="sm-tool-icon">
-      <span class="icon"><Icon icon={recruit.icon.Opinion} size={'small'} /></span>&nbsp;{value.opinions}
-    </div>
-  </Tooltip>
+  <div
+    class="sm-tool-icon"
+    use:tooltip={{ label: recruit.string.Opinions, component: OpinionsPopup, props: { value } }}
+  >
+    <span class="icon"><Icon icon={recruit.icon.Opinion} size={'small'} /></span>&nbsp;{value.opinions}
+  </div>
 {/if}
diff --git a/plugins/recruit-resources/src/components/review/PersonsPresenter.svelte b/plugins/recruit-resources/src/components/review/PersonsPresenter.svelte
index 99e37ff9c9..197500bb57 100644
--- a/plugins/recruit-resources/src/components/review/PersonsPresenter.svelte
+++ b/plugins/recruit-resources/src/components/review/PersonsPresenter.svelte
@@ -18,7 +18,7 @@
   import { formatName, Person } from '@anticrm/contact'
   import { Hierarchy } from '@anticrm/core'
   import { Avatar } from '@anticrm/presentation'
-  import { showPanel, Tooltip } from '@anticrm/ui'
+  import { showPanel, tooltip } from '@anticrm/ui'
   import view from '@anticrm/view'
 
   export let value: Person | Person[]
@@ -35,13 +35,16 @@
 {#if value}
   <div class="flex persons">
     {#each persons as p}
-      <Tooltip label={calendar.string.PersonsLabel} props={{ name: formatName(p.name) }}>
-        <div class="flex-presenter" class:inline-presenter={inline} on:click={() => onClick(p)}>
-          <div class="icon">
-            <Avatar size={'x-small'} avatar={p.avatar} />
-          </div>
+      <div
+        class="flex-presenter"
+        class:inline-presenter={inline}
+        use:tooltip={{ label: calendar.string.PersonsLabel, props: { name: formatName(p.name) } }}
+        on:click={() => onClick(p)}
+      >
+        <div class="icon">
+          <Avatar size={'x-small'} avatar={p.avatar} />
         </div>
-      </Tooltip>
+      </div>
     {/each}
   </div>
 {/if}
diff --git a/plugins/setting-resources/src/components/typeEditors/EnumSelect.svelte b/plugins/setting-resources/src/components/typeEditors/EnumSelect.svelte
index e54619632f..292fc46b45 100644
--- a/plugins/setting-resources/src/components/typeEditors/EnumSelect.svelte
+++ b/plugins/setting-resources/src/components/typeEditors/EnumSelect.svelte
@@ -21,7 +21,6 @@
     Button,
     eventToHTMLElement,
     getFocusManager,
-    Tooltip,
     TooltipAlignment
   } from '@anticrm/ui'
   import EnumPopup from './EnumPopup.svelte'
@@ -63,10 +62,16 @@
   }
 </script>
 
-<Tooltip {label} fill={false} direction={labelDirection}>
-  <Button {focus} {focusIndex} icon={IconFolder} size={'small'} kind={'no-border'} on:click={handleClick}>
-    <span slot="content" class="text-sm overflow-label disabled">
-      {#if value}{value.name}{:else}<Label {label} />{/if}
-    </span>
-  </Button>
-</Tooltip>
+<Button
+  {focus}
+  {focusIndex}
+  icon={IconFolder}
+  size={'small'}
+  kind={'no-border'}
+  showTooltip={{ label, direction: labelDirection }}
+  on:click={handleClick}
+>
+  <span slot="content" class="text-sm overflow-label disabled">
+    {#if value}{value.name}{:else}<Label {label} />{/if}
+  </span>
+</Button>
diff --git a/plugins/setting-resources/src/components/typeEditors/EnumTypeEditor.svelte b/plugins/setting-resources/src/components/typeEditors/EnumTypeEditor.svelte
index 82fa0b0c1a..b8496f0704 100644
--- a/plugins/setting-resources/src/components/typeEditors/EnumTypeEditor.svelte
+++ b/plugins/setting-resources/src/components/typeEditors/EnumTypeEditor.svelte
@@ -16,7 +16,7 @@
   import core, { Enum, EnumOf, Ref } from '@anticrm/core'
   import { TypeEnum } from '@anticrm/model'
   import presentation, { getClient } from '@anticrm/presentation'
-  import { Button, Tooltip, Label, showPopup } from '@anticrm/ui'
+  import { Button, Label, showPopup } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import setting from '../../plugin'
   import EnumSelect from './EnumSelect.svelte'
@@ -60,9 +60,13 @@
   </div>
   {#if value}
     <div class="ml-2">
-      <Tooltip label={presentation.string.Edit}>
-        <Button icon={setting.icon.Setting} kind={'no-border'} on:click={edit} size={'small'} />
-      </Tooltip>
+      <Button
+        icon={setting.icon.Setting}
+        kind={'no-border'}
+        size={'small'}
+        showTooltip={{ label: presentation.string.Edit }}
+        on:click={edit}
+      />
     </div>
   {/if}
 </div>
diff --git a/plugins/tags-resources/src/components/TagItem.svelte b/plugins/tags-resources/src/components/TagItem.svelte
index 6047483b64..3c9d7053ee 100644
--- a/plugins/tags-resources/src/components/TagItem.svelte
+++ b/plugins/tags-resources/src/components/TagItem.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Asset } from '@anticrm/platform'
   import { TagElement, TagReference } from '@anticrm/tags'
-  import { ActionIcon, AnySvelteComponent, getPlatformColor, Tooltip } from '@anticrm/ui'
+  import { ActionIcon, AnySvelteComponent, getPlatformColor, tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tags from '../plugin'
   import { getTagStyle } from '../utils'
@@ -30,29 +30,28 @@
   $: name = element?.title ?? tag?.title ?? 'New item'
 </script>
 
-<Tooltip
-  label={element?.description ? tags.string.TagTooltip : undefined}
-  props={{ text: element?.description }}
-  direction="right"
+<div
+  class="text-sm flex flex-between tag-item"
+  style={`${getTagStyle(getPlatformColor(tag?.color ?? element?.color ?? 0), selected)}`}
+  use:tooltip={{
+    label: element?.description ? tags.string.TagTooltip : undefined,
+    props: { text: element?.description },
+    direction: 'right'
+  }}
 >
-  <div
-    class="text-sm flex flex-between tag-item"
-    style={`${getTagStyle(getPlatformColor(tag?.color ?? element?.color ?? 0), selected)}`}
-  >
-    {name}
-    {#if action}
-      <div class="ml-1">
-        <ActionIcon
-          icon={action}
-          size={'small'}
-          action={() => {
-            dispatch('action')
-          }}
-        />
-      </div>
-    {/if}
-  </div>
-</Tooltip>
+  {name}
+  {#if action}
+    <div class="ml-1">
+      <ActionIcon
+        icon={action}
+        size={'small'}
+        action={() => {
+          dispatch('action')
+        }}
+      />
+    </div>
+  {/if}
+</div>
 
 <style lang="scss">
   .tag-item {
diff --git a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
index b24d555dcf..f2a0ed45d0 100644
--- a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
@@ -18,7 +18,7 @@
   import { KeyedAttribute } from '@anticrm/presentation'
   import { TagElement, TagReference } from '@anticrm/tags'
   import type { ButtonKind, ButtonSize, TooltipAlignment } from '@anticrm/ui'
-  import { Button, showPopup, Tooltip } from '@anticrm/ui'
+  import { Button, showPopup } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tags from '../plugin'
   import TagsPopup from './TagsPopup.svelte'
@@ -73,24 +73,23 @@
   }
 </script>
 
-<Tooltip label={key.attr.label} direction={labelDirection}>
-  <Button
-    icon={key.attr.icon ?? tags.icon.Tags}
-    label={items.length > 0 ? undefined : key.attr.label}
-    width={width ?? 'min-content'}
-    {kind}
-    {size}
-    {justify}
-    on:click={addTag}
-  >
-    <svelte:fragment slot="content">
-      {#if items.length > 0}
-        <div class="flex-row-center flex-nowrap overflow-label disabled">
-          {#await translate(countLabel, { count: items.length }) then text}
-            {text}
-          {/await}
-        </div>
-      {/if}
-    </svelte:fragment>
-  </Button>
-</Tooltip>
+<Button
+  icon={key.attr.icon ?? tags.icon.Tags}
+  label={items.length > 0 ? undefined : key.attr.label}
+  width={width ?? 'min-content'}
+  {kind}
+  {size}
+  {justify}
+  showTooltip={{ label: key.attr.label, direction: labelDirection }}
+  on:click={addTag}
+>
+  <svelte:fragment slot="content">
+    {#if items.length > 0}
+      <div class="flex-row-center flex-nowrap overflow-label disabled">
+        {#await translate(countLabel, { count: items.length }) then text}
+          {text}
+        {/await}
+      </div>
+    {/if}
+  </svelte:fragment>
+</Button>
diff --git a/plugins/task-resources/src/components/KanbanCard.svelte b/plugins/task-resources/src/components/KanbanCard.svelte
index 49c956f69a..29f0efc915 100644
--- a/plugins/task-resources/src/components/KanbanCard.svelte
+++ b/plugins/task-resources/src/components/KanbanCard.svelte
@@ -19,7 +19,7 @@
   import notification from '@anticrm/notification'
   import { Avatar } from '@anticrm/presentation'
   import type { Issue, TodoItem } from '@anticrm/task'
-  import { ActionIcon, Component, IconMoreH, showPopup, Tooltip } from '@anticrm/ui'
+  import { ActionIcon, Component, IconMoreH, showPopup, tooltip } from '@anticrm/ui'
   import { ContextMenu } from '@anticrm/view-resources'
   import task from '../plugin'
   import TaskPresenter from './TaskPresenter.svelte'
@@ -39,9 +39,16 @@
     <div class="flex">
       <TaskPresenter value={object} />
       {#if todoItems.length > 0}
-        <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-          <div class="ml-2">( {doneTasks?.length}/ {todoItems.length} )</div>
-        </Tooltip>
+        <span
+          class="ml-2"
+          use:tooltip={{
+            label: task.string.TodoItems,
+            component: task.component.TodoItemsPopup,
+            props: { value: object }
+          }}
+        >
+          ({doneTasks?.length}/{todoItems.length})
+        </span>
       {/if}
     </div>
     <div class="flex-row-center">
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index fc1d221f0a..d46b1e8122 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -23,7 +23,7 @@
   import { createQuery, getClient } from '@anticrm/presentation'
   import setting, { Integration } from '@anticrm/setting'
   import type { NewTelegramMessage, SharedTelegramMessage, TelegramMessage } from '@anticrm/telegram'
-  import { Button, eventToHTMLElement, IconShare, Tooltip, Scroller, showPopup, Panel, Icon, Label } from '@anticrm/ui'
+  import { Button, eventToHTMLElement, IconShare, Scroller, showPopup, Panel, Icon, Label } from '@anticrm/ui'
   import telegram from '../plugin'
   import Connect from './Connect.svelte'
   import TelegramIcon from './icons/Telegram.svelte'
@@ -225,16 +225,15 @@
           }}
         />
       {:else}
-        <Tooltip label={telegram.string.Share}>
-          <Button
-            icon={IconShare}
-            kind={'transparent'}
-            size={'medium'}
-            on:click={async () => {
-              selectable = !selectable
-            }}
-          />
-        </Tooltip>
+        <Button
+          icon={IconShare}
+          kind={'transparent'}
+          size={'medium'}
+          showTooltip={{ label: telegram.string.Share }}
+          on:click={async () => {
+            selectable = !selectable
+          }}
+        />
       {/if}
     </svelte:fragment>
 
diff --git a/plugins/tracker-resources/src/components/AppItem.svelte b/plugins/tracker-resources/src/components/AppItem.svelte
index 199dddc85e..249148abc0 100644
--- a/plugins/tracker-resources/src/components/AppItem.svelte
+++ b/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 {
diff --git a/plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte b/plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte
index bd2c96bfc4..66c8692cc4 100644
--- a/plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte
+++ b/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}
diff --git a/plugins/tracker-resources/src/components/issues/Board.svelte b/plugins/tracker-resources/src/components/issues/Board.svelte
index f40e90dfb6..407bf1237e 100644
--- a/plugins/tracker-resources/src/components/issues/Board.svelte
+++ b/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>
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
index 15cc669418..49b1e93523 100644
--- a/plugins/tracker-resources/src/components/issues/KanbanView.svelte
+++ b/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>
diff --git a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte b/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
index ee0dd30106..80974bb441 100644
--- a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
+++ b/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">
diff --git a/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte b/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte
index 5a38897033..a84be1b140 100644
--- a/plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte
+++ b/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)}
+/>
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
index 5a8881c923..63fbc5ab7f 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
+++ b/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>
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
index b8d268b01d..a2396e091f 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
+++ b/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}
diff --git a/plugins/tracker-resources/src/components/projects/LeadPresenter.svelte b/plugins/tracker-resources/src/components/projects/LeadPresenter.svelte
index 363fdef8dd..43a00893cf 100644
--- a/plugins/tracker-resources/src/components/projects/LeadPresenter.svelte
+++ b/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}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte
index db8485daf8..9291016dc4 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte
+++ b/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}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectStatusSelector.svelte b/plugins/tracker-resources/src/components/projects/ProjectStatusSelector.svelte
index a646256168..802234c25a 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectStatusSelector.svelte
+++ b/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}
 />
diff --git a/plugins/tracker-resources/src/components/projects/ProjectsList.svelte b/plugins/tracker-resources/src/components/projects/ProjectsList.svelte
index 92ae7ad0b2..016d925628 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectsList.svelte
+++ b/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}
diff --git a/plugins/view-resources/src/components/ClassAttributeBar.svelte b/plugins/view-resources/src/components/ClassAttributeBar.svelte
index 1de5fa7981..e7349db141 100644
--- a/plugins/view-resources/src/components/ClassAttributeBar.svelte
+++ b/plugins/view-resources/src/components/ClassAttributeBar.svelte
@@ -16,7 +16,7 @@
   import { Class, Doc, Ref } from '@anticrm/core'
   import { AttributesBar, getClient, KeyedAttribute } from '@anticrm/presentation'
   import setting, { settingId } from '@anticrm/setting'
-  import { Button, getCurrentLocation, Label, navigate, Tooltip } from '@anticrm/ui'
+  import { Button, getCurrentLocation, Label, navigate } from '@anticrm/ui'
   import { getFiltredKeys, isCollectionAttr } from '../utils'
 
   export let object: Doc
@@ -58,22 +58,21 @@
     </div>
   </div>
   <div class="tool">
-    <Tooltip label={setting.string.ClassSetting}>
-      <Button
-        icon={setting.icon.Setting}
-        kind={'transparent'}
-        on:click={(ev) => {
-          ev.stopPropagation()
-          const loc = getCurrentLocation()
-          loc.path[1] = settingId
-          loc.path[2] = 'classes'
-          loc.path.length = 3
-          loc.query = { _class }
-          loc.fragment = undefined
-          navigate(loc)
-        }}
-      />
-    </Tooltip>
+    <Button
+      icon={setting.icon.Setting}
+      kind={'transparent'}
+      showTooltip={{ label: setting.string.ClassSetting }}
+      on:click={(ev) => {
+        ev.stopPropagation()
+        const loc = getCurrentLocation()
+        loc.path[1] = settingId
+        loc.path[2] = 'classes'
+        loc.path.length = 3
+        loc.query = { _class }
+        loc.fragment = undefined
+        navigate(loc)
+      }}
+    />
   </div>
 </div>
 {#if keys.length}
diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index 75f6ca4e0c..b5ee354ccf 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-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 {
diff --git a/tests/sanity/tests/settings.spec.ts b/tests/sanity/tests/settings.spec.ts
index cfb3294e3d..aef386aa27 100644
--- a/tests/sanity/tests/settings.spec.ts
+++ b/tests/sanity/tests/settings.spec.ts
@@ -36,7 +36,7 @@ test.describe('contact tests', () => {
     // await page.hover('[id="gmail:string:Email"]')
     await page.fill('[placeholder="john\\.appleseed\\@apple\\.com"]', 'wer@qwe.com')
     // Click text=Apply
-    await page.click('button:nth-child(3)')
+    await page.click('.editor-container button:nth-child(3)')
   })
   test('create-template', async ({ page }) => {
     // Go to http://localhost:8083/workbench%3Acomponent%3AWorkbenchApp
diff --git a/tests/sanity/tests/tags.spec.ts b/tests/sanity/tests/tags.spec.ts
index 25c2ef0526..6804f3509a 100644
--- a/tests/sanity/tests/tags.spec.ts
+++ b/tests/sanity/tests/tags.spec.ts
@@ -37,10 +37,12 @@ test.describe('recruit tests', () => {
     await page.click('form[id="tags:string:AddTag"]  button:has-text("Create")')
     await page.click('button:has-text("Other")')
     // Click text=s1
-    await page.click('text=s1')
+    // await page.click('text=s1')
+    await page.click('button:has-text("s1") .check')
     // Click :nth-match(:text("Cancel"), 2)
     // await page.click('button:has-text("Cancel")')
     await page.keyboard.press('Escape')
+    await page.keyboard.press('Escape')
     // Click button:has-text("Create")
     await page.click('button:has-text("Create")')
   })