Layercake Tooltip

Tooltip.svelte

<script>
  import { getContext } from 'svelte';
  export let evt = undefined;
  export let offset = 35;
  export let headerFn = undefined;
  export let nestedAccessors = false;
  export let dimensions;
  let { custom } = getContext('LayerCake');
</script>

<style>
  .tooltip {
    position: absolute;
    border: 1px solid #ccc;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -100%);
    padding: 5px;
    z-index: 15;
  }
</style>

{#if evt && evt.detail}
  <div
    class="tooltip"
    style=" top:{evt.detail.e.layerY - offset}px; left:{evt.detail.e.layerX}px; ">
    <slot detail={evt.detail}>
      <div class="flex flex-col text-sm">
        <div class="font-bold">{header(evt.detail)}</div>
        {#each accessors as { label, value }, index (index)}
          <div class="whitespace-no-wrap">
            <span class="font-medium">{label(evt.detail.data)}:</span>
            {value(evt.detail.data)}
          </div>
        {/each}
      </div>
    </slot>
  </div>
{/if}