@dpa-id-components/ui-tooltip

UiTooltip Vue 2.x tooltip component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-tooltip

Usage

<!-- SomeComponent.vue using UiTooltip -->
<template>
  <div style="margin: 50px; max-width: max-content;">
    <ui-tooltip>
      <template v-slot:activator>
        <button>Target</button>
      </template>
      Tooltip Content
    </ui-tooltip>
  </div>
</template>

<script>
  import UiTooltip from "@dpa-id-components/ui-tooltip";

  export default {
    components: { UiTooltip },
  };
</script>

Demo

View a demo of <ui-tooltip> on Storybook

API

Props

| Name | Type | Default | Values | Description | |---------------------|-----------|-------------------|---------------------------------------------------|-----------------------------------------------------------------------| | position | String | "bottom-center" | "top-left" | "top-center" |"top-right"|"right"|"bottom-right"|"bottom-center"|"bottom-left"|"left" | Position of the tooltip relative to the activator slot | | structured-info | Array | [] | e.g. [{ title: "Typ", description: "Termine" }] | For tootltips with structured information, i.e. title and description | | structured-Layout | Boolean | false | | Needs to be enabled for the structured tooltip |

Slots

| Name | Description | |-------------|---------------------------------------------| | default | Dfault slot for text/content of the tooltip | | activator | Slot for tooltip activator |