platform/packages/ui/src/components/Tooltip.svelte

<!--
// Copyright © 2020 Anticrm Platform Contributors.
// 
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
-->

<script lang="ts">
  import type { IntlString } from '@anticrm/platform'
  import Label from './Label.svelte'

  export let label: IntlString
  export let direction: 'top' | 'bottom' | 'left' | 'right' = 'top'
</script>

<div class="flex-center container">
  <div class="trigger"><slot/></div>
  <div class="tooltip {direction}">
    <Label label={label}/>
  </div>
</div>

<style lang="scss">
  .container {
    position: relative;
    
    .trigger:hover + .tooltip {
      opacity: 1;
      &.top {
        transform: translateY(-.625rem);
      }
      &.bottom {
        transform: translateY(.625rem);
      }
      &.right {
        transform: translateX(.625rem);
      }
      &.left {
        transform: translateX(-.625rem);
      }
    }

    .tooltip {
      box-sizing: border-box;
      position: absolute;
      padding: .5rem;
      color: var(--theme-caption-color);
      background-color: var(--theme-tooltip-color);
      border: 1px solid var(--theme-bg-accent-color);
      border-radius: .5rem;
      box-shadow: 0px .5rem 1.25rem rgba(0, 0, 0, .25);
      opacity: 0;
      transition: transform .3s ease, opacity .2s ease-in-out;
      pointer-events: none;
      user-select: none;
      text-align: center;
      transition-delay: .2s;
      z-index: 10;

      &::after {
        content: "";
        position: absolute;
        width: .875rem;
        height: .875rem;
        background-color: var(--theme-tooltip-color);
        border: 1px solid var(--theme-bg-accent-color);
        border-radius: 0 0 .25rem;
        mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 1) .655rem, rgba(0, 0, 0, 0) .656rem);
      }

      &.top::after, &.bottom::after {
        left: 50%;
        margin-left: -.5rem;
      }
      &.top {
        bottom: 100%;
        box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
        &::after {
          bottom: -.5rem;
          transform: rotate(45deg);
        }
      }
      &.bottom {
        top: 100%;
        box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
        &::after {
          top: -.5rem;
          transform: rotate(-135deg);
        }
      }

      &.right::after, &.left::after {
        top: 50%;
        margin-top: -.5rem;
      }
      &.right {
        left: 100%;
        box-shadow: -.5rem 0px 1.25rem rgba(0, 0, 0, .25);
        &::after {
          left: -.4rem;
          transform: rotate(135deg);
        }
      }
      &.left {
        right: 100%;
        box-shadow: .5rem 0px 1.25rem rgba(0, 0, 0, .25);
        &::after {
          right: -.4rem;
          transform: rotate(-45deg);
        }
      }
    }
  }
</style>