diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json
index 092ffc44fd..e86f43a54c 100644
--- a/packages/ui/lang/en.json
+++ b/packages/ui/lang/en.json
@@ -9,6 +9,7 @@
     "ShowLess": "Show less",
     "Search": "Search",
     "SearchDots": "Search...",
-    "Suggested": "Suggested"
+    "Suggested": "Suggested",
+    "TimeTooltip": "{value}"
   }
 }
diff --git a/packages/ui/src/components/TimeSince.svelte b/packages/ui/src/components/TimeSince.svelte
index b39b43103e..5cfbca350f 100644
--- a/packages/ui/src/components/TimeSince.svelte
+++ b/packages/ui/src/components/TimeSince.svelte
@@ -30,7 +30,7 @@
 
   let time: string = ''
 
-  async function formatTime(now: number) {
+  async function formatTime (now: number) {
     let passed = now - value
     if (passed < 0) passed = 0
     if (passed < HOUR) {
@@ -44,10 +44,10 @@
 
   $: formatTime($ticker)
 
-  $: tooltip = new Date(value).toLocaleString('default', { minute:'2-digit', hour:'numeric', day:'2-digit', month: 'short', year: 'numeric'}) as IntlString
+  $: tooltip = new Date(value).toLocaleString('default', { minute: '2-digit', hour: 'numeric', day: '2-digit', month: 'short', year: 'numeric' })
 
 </script>
 
-<Tooltip label={tooltip}>
+<Tooltip label={ui.string.TimeTooltip} props={{ value: tooltip }}>
   <span style="white-space: nowrap;" >{time}</span>
 </Tooltip>
\ No newline at end of file
diff --git a/packages/ui/src/components/Tooltip.svelte b/packages/ui/src/components/Tooltip.svelte
index ac825b8d7f..4f056d1dc5 100644
--- a/packages/ui/src/components/Tooltip.svelte
+++ b/packages/ui/src/components/Tooltip.svelte
@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import type { TooltipAligment, AnySvelteComponent, AnyComponent } from '..'
@@ -26,11 +25,12 @@
 
   let triggerHTML: HTMLElement
   let shown: boolean = false
-  $: shown = !!(($tooltip.label || $tooltip.component))
+  $: shown = !!($tooltip.label || $tooltip.component)
 </script>
 
 <div
-  class="tooltip-trigger" name={`tooltip-${label}`}
+  class="tooltip-trigger"
+  name={`tooltip-${label}`}
   bind:this={triggerHTML}
   on:mousemove={() => {
     if (!shown) showTooltip(label, triggerHTML, direction, component, props, anchor)
@@ -40,5 +40,7 @@
 </div>
 
 <style lang="scss">
-  .tooltip-trigger { width: fit-content; }
+  .tooltip-trigger {
+    width: fit-content;
+  }
 </style>
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index 30ff50b423..6bd02c56d4 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
   import { afterUpdate, onDestroy } from 'svelte'
   import { tooltipstore as tooltip, closeTooltip } from '..'
@@ -28,19 +27,24 @@
   let nubDirection: 'top' | 'bottom' | 'left' | 'right' | undefined = undefined
   let clWidth: number
 
-  $: tooltipSW = $tooltip.component ? false : true
+  $: tooltipSW = !$tooltip.component
 
   const fitTooltip = (): void => {
     if (($tooltip.label || $tooltip.component) && tooltipHTML) {
       if ($tooltip.element) {
         const doc = document.body.getBoundingClientRect()
         rect = $tooltip.element.getBoundingClientRect()
-        rectAnchor = ($tooltip.anchor) ? $tooltip.anchor.getBoundingClientRect()
-                                       : $tooltip.element.getBoundingClientRect()
+        rectAnchor = $tooltip.anchor
+          ? $tooltip.anchor.getBoundingClientRect()
+          : $tooltip.element.getBoundingClientRect()
 
         if ($tooltip.component) {
-
-          tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.left = tooltipHTML.style.right = tooltipHTML.style.height = ''
+          tooltipHTML.style.top =
+            tooltipHTML.style.bottom =
+            tooltipHTML.style.left =
+            tooltipHTML.style.right =
+            tooltipHTML.style.height =
+              ''
           if (rect.bottom + tooltipHTML.clientHeight + 28 < doc.height) {
             tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
             dir = 'bottom'
@@ -72,9 +76,7 @@
             nubHTML.style.height = rect.height + 'px'
             nubDirection = dir
           }
-
         } else {
-
           if (!$tooltip.direction) {
             if (rectAnchor.right < doc.width / 5) dir = 'right'
             else if (rectAnchor.left > doc.width - doc.width / 5) dir = 'left'
@@ -100,7 +102,6 @@
             tooltipHTML.style.transform = 'translateX(-50%)'
           }
           tooltipHTML.classList.remove('no-arrow')
-
         }
       } else {
         tooltipHTML.style.top = '50%'
@@ -139,20 +140,35 @@
   onDestroy(() => hideTooltip())
 </script>
 
-<svelte:window on:resize={hideTooltip} on:mousemove={(ev) => { whileShow(ev) }} />
+<svelte:window
+  on:resize={hideTooltip}
+  on:mousemove={(ev) => {
+    whileShow(ev)
+  }}
+/>
 <svg class="svg-mask">
-  <clipPath id="nub-bg"><path d="M7.3.6 4.2 4.3C2.9 5.4 1.5 6 0 6v1h18V6c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2z" /></clipPath>
-  <clipPath id="nub-border"><path d="M4.8 5.1 8 1.3s.1 0 .1-.1c.5-.3 1.4-.3 1.9.1L13.1 5l.1.1 1.2.9H18c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2L4.2 4.3C2.9 5.4 1.5 6 0 6h3.6l1.2-.9z" /></clipPath>
+  <clipPath id="nub-bg"
+    ><path
+      d="M7.3.6 4.2 4.3C2.9 5.4 1.5 6 0 6v1h18V6c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2z"
+    /></clipPath
+  >
+  <clipPath id="nub-border"
+    ><path
+      d="M4.8 5.1 8 1.3s.1 0 .1-.1c.5-.3 1.4-.3 1.9.1L13.1 5l.1.1 1.2.9H18c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2L4.2 4.3C2.9 5.4 1.5 6 0 6h3.6l1.2-.9z"
+    /></clipPath
+  >
 </svg>
 {#if $tooltip.component}
   <div class="popup-tooltip" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
-    {#if $tooltip.label}<div class="fs-title mb-4"><Label label={$tooltip.label} /></div>{/if}
+    {#if $tooltip.label}<div class="fs-title mb-4">
+        <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
+      </div>{/if}
     <svelte:component this={$tooltip.component} {...$tooltip.props} />
   </div>
   <div bind:this={nubHTML} class="nub {nubDirection ?? ''}" />
 {:else if $tooltip.label}
   <div class="tooltip {dir ?? ''}" bind:this={tooltipHTML}>
-    <Label label={$tooltip.label} />
+    <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
   </div>
 {/if}
 
@@ -167,8 +183,8 @@
     color: var(--theme-caption-color);
     background-color: var(--theme-tooltip-color);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: .75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+    border-radius: 0.75rem;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
     user-select: none;
     z-index: 10000;
   }
@@ -180,69 +196,85 @@
     pointer-events: none;
     z-index: 10000;
 
-    &::after, &::before {
+    &::after,
+    &::before {
       position: absolute;
       width: 18px;
       height: 7px;
     }
     &::before {
       background-color: var(--theme-tooltip-color);
-      clip-path: url("#nub-bg");
+      clip-path: url('#nub-bg');
       z-index: 1;
     }
     &::after {
       background-color: var(--theme-bg-accent-color);
-      clip-path: url("#nub-border");
+      clip-path: url('#nub-border');
       z-index: 2;
     }
 
-    &.top::after, &.bottom::after,
-    &.top::before, &.bottom::before,
-    &.right::after, &.left::after,
-    &.right::before, &.left::before { content: ''; }
-    &.top::after, &.bottom::after,
-    &.top::before, &.bottom::before {
+    &.top::after,
+    &.bottom::after,
+    &.top::before,
+    &.bottom::before,
+    &.right::after,
+    &.left::after,
+    &.right::before,
+    &.left::before {
+      content: '';
+    }
+    &.top::after,
+    &.bottom::after,
+    &.top::before,
+    &.bottom::before {
       left: 50%;
       margin-left: -9px;
     }
-    &.top::after, &.top::before {
-      top: calc(-7px - .25rem);
+    &.top::after,
+    &.top::before {
+      top: calc(-7px - 0.25rem);
       transform: rotate(180deg);
     }
-    &.bottom::after, &.bottom::before {
-      bottom: calc(-7px - .25rem);
+    &.bottom::after,
+    &.bottom::before {
+      bottom: calc(-7px - 0.25rem);
     }
 
-    &.right::after, &.left::after,
-    &.right::before, &.left::before {
+    &.right::after,
+    &.left::after,
+    &.right::before,
+    &.left::before {
       top: 50%;
       margin-top: -9px;
     }
-    &.left::after, &.left::before {
+    &.left::after,
+    &.left::before {
       transform-origin: left top;
-      left: -.25rem;
+      left: -0.25rem;
       transform: rotate(90deg);
     }
-    &.right::after, &.right::before {
+    &.right::after,
+    &.right::before {
       transform-origin: right top;
-      right: -.25rem;
+      right: -0.25rem;
       transform: rotate(-90deg);
     }
   }
 
   .tooltip {
     position: fixed;
-    padding: .5rem .75rem;
+    padding: 0.5rem 0.75rem;
     text-align: center;
     color: var(--theme-caption-color);
     background-color: var(--theme-tooltip-color);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: .75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+    border-radius: 0.75rem;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
     user-select: none;
     z-index: 10000;
 
-    &::after, &::before {
+    &::after,
+    &::before {
       content: '';
       position: absolute;
       width: 18px;
@@ -250,42 +282,49 @@
     }
     &::before {
       background-color: var(--theme-tooltip-color);
-      clip-path: url("#nub-bg");
+      clip-path: url('#nub-bg');
       z-index: 1;
     }
     &::after {
       background-color: var(--theme-bg-accent-color);
-      clip-path: url("#nub-border");
+      clip-path: url('#nub-border');
       z-index: 2;
     }
 
-    &.top::after, &.bottom::after,
-    &.top::before, &.bottom::before {
+    &.top::after,
+    &.bottom::after,
+    &.top::before,
+    &.bottom::before {
       left: 50%;
       margin-left: -9px;
     }
     &.top {
       bottom: 100%;
-      &::after, &::before {
+      &::after,
+      &::before {
         bottom: -7px;
         transform: rotate(180deg);
       }
     }
     &.bottom {
       top: 100%;
-      &::after, &::before {
+      &::after,
+      &::before {
         top: -7px;
       }
     }
 
-    &.right::after, &.left::after,
-    &.right::before, &.left::before {
+    &.right::after,
+    &.left::after,
+    &.right::before,
+    &.left::before {
       top: 50%;
       margin-top: -9px;
     }
     &.right {
       left: 100%;
-      &::after, &::before {
+      &::after,
+      &::before {
         transform-origin: right top;
         left: -25px;
         transform: rotate(-90deg);
@@ -293,7 +332,8 @@
     }
     &.left {
       right: 100%;
-      &::after, &::before {
+      &::after,
+      &::before {
         transform-origin: left top;
         right: -25px;
         transform: rotate(90deg);
@@ -301,8 +341,9 @@
     }
   }
   .no-arrow {
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, .75);
-    &::after, &::before {
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
+    &::after,
+    &::before {
       content: none;
     }
   }
diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts
index 94325beb34..1db02c4d8d 100644
--- a/packages/ui/src/plugin.ts
+++ b/packages/ui/src/plugin.ts
@@ -33,6 +33,7 @@ export default plugin(uiId, {
     ShowLess: '' as IntlString,
     Search: '' as IntlString,
     SearchDots: '' as IntlString,
-    Suggested: '' as IntlString
+    Suggested: '' as IntlString,
+    TimeTooltip: '' as IntlString
   }
 })