added tooltip component

Author: snenenenenenene

addon/components/au-tooltip.gts

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+
+export interface AuTooltipSignature {
+  Args: {
+    text: string;
+    tooltipText: string;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuTooltip extends Component<AuTooltipSignature> {
+  <template>
+    <div class="au-c-tooltip">
+      <p class="au-u-h4 au-u-margin-right-tiny au-u-margin-bottom-none">
+        {{@text}}
+      </p>
+      <span class="au-c-tooltip-text">{{@tooltipText}}
+      </span>
+    </div>
+  </template>
+}

addon/index.js

@@ -45,6 +45,7 @@ export { default as AuTimePicker } from '@appuniversum/ember-appuniversum/compon
 export { default as AuToaster } from '@appuniversum/ember-appuniversum/components/au-toaster';
 export { default as AuToggleSwitch } from '@appuniversum/ember-appuniversum/components/au-toggle-switch';
 export { default as AuToolbar } from '@appuniversum/ember-appuniversum/components/au-toolbar';
+export { default as AuTooltip } from '@appuniversum/ember-appuniversum/components/au-tooltip';
 
 // Modifiers
 export { default as auDateInput } from '@appuniversum/ember-appuniversum/modifiers/au-date-input';

app/components/au-tooltip.js

@@ -0,0 +1 @@
+export { default } from '@appuniversum/ember-appuniversum/components/au-tooltip';

stories/5-components/Content/AuTooltip.stories.js

@@ -0,0 +1,25 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { icons } from '../../assets/icons';
+
+export default {
+  title: 'Components/Content/AuTooltip',
+  argTypes: {
+    text: { control: 'text', description: '' },
+    tooltipText: { control: 'text', description: '' },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+     <AuTooltip
+	 @text={{text}}
+	 @tooltipText={{tooltipText}}
+	 />`,
+  context: args,
+});
+
+export const Component = Template.bind({});
+Component.args = {
+  text: 'Lorem Ipsum',
+  tooltipText: 'Tooltip text',
+};

styles/components/_c-tooltip.scss

@@ -0,0 +1,50 @@
+/* ==================================
+   #TOOLTIP
+   ================================== */
+
+/* Variables
+   ========================================================================== */
+
+/* Component
+	  ========================================================================== */
+
+.au-c-tooltip {
+  height: 100%;
+  position: relative;
+  display: flex;
+  margin: auto 0;
+  justify-self: center;
+  align-self: center;
+}
+
+.au-c-tooltip .au-c-tooltip-text {
+  position: absolute;
+  cursor: pointer;
+  bottom: 0;
+  left: 0;
+  transform: translateY(100%);
+  visibility: hidden;
+  width: 300px;
+  background-color: var(--au-white);
+  color: var(--au-gray-700);
+  text-align: center;
+  font-size: var(--au-base);
+  line-height: var(--au-global-line-height);
+  display: inline-flex;
+  gap: 0.6rem;
+  align-items: center;
+  font-family: var(--au-font);
+  font-weight: var(--au-medium);
+  border: 0.1rem solid var(--vl-grey-50);
+  padding: 0.1rem 0.6rem 0;
+  border-radius: 0.6rem;
+  min-height: 2.55rem;
+  padding: 5px 0;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Modifiers
+	 ========================================================================== */