@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"
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