We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

The AnchorTooltip component displays a brief tooltip message when the user interacts with a target element. You identify the target element using a CSS selector passed to the target prop.

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <p id="info">What is Toxoplasma Gondii?</p>
  <anchor-tooltip target="#info" text="A mind controlling fungus."></anchor-tooltip>
</template>

<script setup>
import { AnchorTooltip } from '@tryg/vue-ui-library';
</script>
<template>
  <p id="info">What is Toxoplasma Gondii?</p>
  <anchor-tooltip target="#info" text="A mind controlling fungus."></anchor-tooltip>
</template>

<template>
  <p id="info">What is Toxoplasma Gondii?</p>
  <anchor-tooltip target="#info" text="A mind controlling fungus."></anchor-tooltip>
</template>

Position

Pass the position prop to control where the tooltip appears relative to the target element. The available positions are top, bottom, left, and right. The default position is bottom.

<script setup>
import { AnchorTooltip } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-tooltip target="#tip-top" text="I appear on top" position="top"></anchor-tooltip>
  <anchor-tooltip target="#tip-bottom" text="I appear on the bottom" position="bottom"></anchor-tooltip>
  <anchor-tooltip target="#tip-left" text="I appear on the left" position="left"></anchor-tooltip>
  <anchor-tooltip target="#tip-right" text="I appear on the right" position="right"></anchor-tooltip>
</template>

The tooltip automatically adjusts its position to stay within the viewport. If the specified position would render it partially or completely outside the viewport, the component translates its position or changes the alignment accordingly.

Trigger

Pass the trigger prop to control how the tooltip is activated. The available triggers are mouseenter, click, and manual. The default trigger is mouseenter.

<script setup>
import { AnchorTooltip } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-tooltip target="#tip-click" text="Triggered by click" trigger="click"></anchor-tooltip>
</template>

When using manual as the trigger, the tooltip will not respond to user interactions automatically. You must programmatically control it using the open() and close() methods.

Timing

You can customize the timing behavior of the tooltip using the appear-delay and duration props.

• appear-delay — Time in milliseconds from the trigger event until the tooltip appears. Default is 350.
• duration — How long in milliseconds before the tooltip closes. Only works when trigger is mouseenter. Default is 400.

<script setup>
import { AnchorTooltip } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-tooltip target="#tip-fast" text="Appears instantly" :appear-delay="0" :duration="2000"></anchor-tooltip>
</template>

Methods

The AnchorTooltip component exposes two methods for programmatic control: open() and close(). These are useful when using the manual trigger, or when you need to control the tooltip from external events.

Both methods return a Promise<void>.

• open() — Opens the tooltip programmatically.
• close() — Closes the tooltip programmatically.

Accessibility

• The tooltip associates itself with the target element using aria-describedby, linking the target to the tooltip's unique tooltipId.
• On touch devices, mouseenter triggers automatically fall back to click, ensuring the tooltip is accessible to all users.
• When using the click trigger, the tooltip remains open until the user clicks again or interacts elsewhere, allowing screen reader users sufficient time to consume the content.
• The component generates a unique tooltipId by default, which can be overridden via the tooltip-id prop.

API

Tooltip

A basic tooltip component.

It has several useful inbuilt features.

1. Stays within viewport. Translating x/y transform and/or changing position if supplied position renders it partially or completely outside viewport.

2. The trigger mouseenter will default to a click trigger if device displaying component doesn't have hover capabilities (tablet, phone, etc....)

Usage

Basic usage

<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target="#info" text="A mind controlling fungus." />

With a class selector as target. (Only an example. You should prefer unique selectors like id or similar)

<p class="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target=".info" text="A mind controlling fungus." />

Appear really fast and stay for a loooong time

<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip appearDelay="0" duration="13371337" target="#info" text="A mind controlling fungus." />

Advanced usage

Triggering manually

<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip id="infoTip" target="#info" text="A mind controlling fungus." />
<script>
  document.querySelector('#infoTip').open();
</script>

Custom tooltip content

<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target="#info">
  <h1>Custom content simply goes inside the anchor-tooltip tag</h1>
  <img src="http://www.placecage.com/200/200" />
</anchor-tooltip>

Properties

Methods

close() => Promise<void>

Returns

Type: Promise<void>

open() => Promise<void>

Returns

Type: Promise<void>

Dependencies

Used by

• anchor-input

Graph

graph TD;
  anchor-input --> anchor-tooltip
  style anchor-tooltip fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS