tooltip

Author: gregorw

src/Tooltip/Tooltip.svelte

@@ -71,6 +71,8 @@
   import { createEventDispatcher, afterUpdate, setContext } from "svelte";
   import { writable } from "svelte/store";
   import Information from "../icons/Information.svelte";
+  import Popover from "../Popover/Popover.svelte";
+  import PopoverContent from "../Popover/PopoverContent.svelte";
 
   const dispatch = createEventDispatcher();
   const tooltipOpen = writable(open);
@@ -204,9 +206,9 @@
   style:z-index="{open ? 1 : undefined}"
   {...$$restProps}
 >
-  {#if !hideIcon}
-    <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
-      <slot name="triggerText">{triggerText}</slot>
+  <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
+    <slot name="triggerText">{triggerText}</slot> <!-- todo: remove this. it’s only kept for legacy. -->
+    <Popover bind:open highContrast>
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         bind:this="{refIcon}"
@@ -220,50 +222,9 @@
           <svelte:component this="{icon}" name="{iconName}" />
         </slot>
       </div>
-    </div>
-  {:else}
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      bind:this="{ref}"
-      {...buttonProps}
-      aria-describedby="{tooltipId}"
-      on:mousedown="{onMousedown}"
-      on:focus="{onFocus}"
-      on:blur="{onBlur}"
-      on:keydown="{onKeydown}"
-    >
-      <slot name="triggerText">{triggerText}</slot>
-    </div>
-  {/if}
-  {#if open}
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      bind:this="{refTooltip}"
-      id="{tooltipId}"
-      data-floating-menu-direction="{direction}"
-      class:bx--tooltip="{true}"
-      class:bx--tooltip--shown="{open}"
-      class:bx--tooltip--top="{direction === 'top'}"
-      class:bx--tooltip--right="{direction === 'right'}"
-      class:bx--tooltip--bottom="{direction === 'bottom'}"
-      class:bx--tooltip--left="{direction === 'left'}"
-      class:bx--tooltip--align-center="{align === 'center'}"
-      class:bx--tooltip--align-start="{align === 'start'}"
-      class:bx--tooltip--align-end="{align === 'end'}"
-      on:keydown="{onKeydown}"
-    >
-      <span class:bx--tooltip__caret="{true}"></span>
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-      <div
-        on:click|stopPropagation
-        on:mousedown|stopPropagation
-        class:bx--tooltip__content="{true}"
-        tabindex="-1"
-        role="dialog"
-      >
+      <PopoverContent>
         <slot />
-      </div>
-    </div>
-  {/if}
+      </PopoverContent>
+    </Popover>
+  </div>
 </div>