feat: initial commit

src/components/TooltipDefinition/TooltipDefinition.Story.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import TooltipDefinition from './TooltipDefinition.svelte';
+</script>
+
+<Layout>
+  <div>
+    <TooltipDefinition {...$$props}>Defintion Tooltip</TooltipDefinition>
+  </div>
+</Layout>

src/components/TooltipDefinition/TooltipDefinition.stories.js

@@ -0,0 +1,30 @@
+import { withKnobs, select, text } from '@storybook/addon-knobs';
+import Component from './TooltipDefinition.Story.svelte';
+
+export default { title: 'TooltipDefinition', decorators: [withKnobs] };
+
+const directions = {
+  'Top (top)': 'top',
+  'Right (right)': 'right',
+  'Bottom (bottom)': 'bottom',
+  'Left (left)': 'left'
+};
+
+const alignments = {
+  'Start (start)': 'start',
+  'Center (center)': 'center',
+  'End (end)': 'end'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    triggerClass: text('Trigger element CSS class name (triggerClassName)', ''),
+    direction: select('Tooltip direction (direction)', directions, 'bottom'),
+    align: select('Tooltip alignment to trigger button (align)', alignments, 'start'),
+    tooltipText: text(
+      'Tooltip content (tooltipText)',
+      'Brief description of the dotted, underlined word above.'
+    )
+  }
+});

src/components/TooltipDefinition/TooltipDefinition.svelte

@@ -0,0 +1,36 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let direction = 'bottom';
+  export let align = 'center';
+  export let id = Math.random();
+  export let triggerClassName = undefined;
+  export { triggerClassName as triggerClass };
+  export let tooltipText = '';
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--tooltip--definition', '--tooltip--a11y', className);
+  const _triggerClass = cx(
+    '--tooltip__trigger',
+    '--tooltip--a11y',
+    '--tooltip__trigger--definition',
+    `--tooltip--${direction}`,
+    `--tooltip--align-${align}`,
+    triggerClassName
+  );
+</script>
+
+<div {...props} class={_class}>
+  <button
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={_triggerClass}
+    aria-describedby={id}>
+    <slot />
+  </button>
+  <div role="tooltip" class={cx('--assistive-text')} {id}>{tooltipText}</div>
+</div>

src/components/TooltipDefinition/index.js

@@ -0,0 +1,3 @@
+import TooltipDefinition from './TooltipDefinition.svelte';
+
+export default TooltipDefinition;