@dpa-id-components/ui-tooltip NPM

@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

@everything-registry/sub-chunk-254 @infinitebrahmanuniverse/nolb-_dp

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago