Tooltip

A tooltip is a floating, non-actionable item to communicate extra information related to an element on the screen. The additional information should be contextual, useful, and nonessential.

Example

I have a very basic tooltip. It is unobtrusive but helps the user to read texts that may have been truncated.

These icon buttons use the wui-tooltip.

I am even more comlex and can also contain HTML tags like this

<div class="m-b-30" style="max-width:410px; margin:0 auto;">
  <p class="text--overflow-ellipsis" title="I have a very basic tooltip. It is unobtrusive but helps the user to read texts that may have been truncated. ">
  I have a very basic tooltip. It is unobtrusive but helps the user to read texts that may have been truncated.
  </p>
</div>
<div class="text--center">
  <p>These icon buttons use the <code>wui-tooltip</code>.</p>
  <div>
    <wui-button v-w-tooltip.hover title="I am a bit more complex, but also not that subtle." class="m-r-10" variant="default" :outline="true">
      <i class="fa-solid fa-message"></i>
    </wui-button>
    <wui-button variant="default" :outline="true" id="tooltip-example-target-1">
      <i class="fa-solid fa-code"></i>
    </wui-button>
    <wui-tooltip target="tooltip-example-target-1" triggers="hover">
      I am even more comlex and can also contain HTML tags like this <i class="fa-solid fa-rocket"></i>
    </wui-tooltip>
  </div>
</div>

Usage

The tooltip is a floating element that allows us to display additional information. At wescale, we use two different tooltips - one is the wui-tooltip and the other one is the native HTML title attribute. Even though both tooltips hardly differ from each other, they have individual advantages and disadvantages. Depending on the use case, we always use the best of both worlds.

Make sure to distinguish tooltips from popovers. Popovers are much more complex and can contain longer texts, images, checkbox lists, or similar small interactions. You can find more information about popovers here.

One of the advantages of the wui-tooltip component is that we have more control over its appearance. We can determine the size and alignment. In addition, we can display HTML elements and control the trigger. Since there is no onHover on touch devices, the tooltip can appear onClick in this case.
On the other hand, the disadvantage is that the wui-tooltip might block the content in some edge cases. Therefore, a developer should always know where the tooltip appears and what other UI elements are adjacent.

When to use the `wui-tooltip`

Iconbuttons. Most icons have some level of ambiguity, which is why we are always using the wui-tooltip here.
Shortcut information. If an action can be executed by a keyboard shortcut, this appears in the tooltip (e.g. [win + V]).
Additional information. Further information that we display, for example, in connection with this icon

One advantage of the native tooltip is its simple and stable implementation. Moreover, it is very subtle and never blocks the content since it disappears as soon as the affected UI element is no longer onHover. A disadvantage is that touchscreen devices do not support the title attribute. In addition, the native tooltip always looks slightly different in different browsers. In other words, we cannot customize the appearance of the native tooltip.

Generally, we use the title attribute whenever texts might be truncated. The title attribute is then always the same as the truncated text.

Table-cells. For more clarity, table cells are often limited to two lines. This often leads to truncation. However, the user can always read the full text in the native tooltip.
Cards. We also have to rely on truncation due to space constraints on our cards.
Buttons. The text on buttons should never be truncated. However, there are rare exceptions where there is no other way. In this case, the button would also have a native tooltip.
User generated content. Since we only have limited control over the length of the texts here, we need to make sure that they are always fully accessible, even if they are truncated in the UI.

WUI decisions

Importance. Do not use tooltips for information that is important for completing a task. Important information should always be directly on the page.
Out of sight, out of mind. Instructions that help to fill out a form field, for example, do not belong in a tooltip. They should always be visible, so that the user does not have to remember them - even if it is only for a short time.
Trigger. Tooltips usually do not have a visual trigger. Therefore, it is essential to use them consistently in the same places so that users know where to expect additional information.
Floating UI. Tooltips appear on top of other UI elements. Make sure that no other clickable elements are blocked by them.

import { WuiTooltip } from "@wui/wui-vue/lib/tooltip";

Description

Easily add tooltips to elements or components via the <wui-tooltip> component or v-w-tooltip directive (preferred method).

<div class="text-center m-y-15">
  <wui-button v-w-tooltip.hover title="Tooltip directive content">
    Hover Me
  </wui-button>

  <wui-button id="tooltip-target-1"> Hover Me </wui-button>
  <wui-tooltip target="tooltip-target-1" triggers="hover">
    I am tooltip <b>component</b> content!
  </wui-tooltip>
</div>

<!-- wui-tooltip.vue -->

Overview

Things to know when using tooltip component:

Tooltips rely on the 3rd party library Popper.js for positioning.
Tooltips require WuiVue's custom SCSS/CSS in order to function correctly, and for variants.
Triggering tooltips on hidden elements will not work.
Specify container as null (default, appends to <body>) to avoid rendering problems in more complex components (like input groups, button groups, etc.). You can use container to optionally specify a different element to append the rendered tooltip to.
Tooltips for disabled elements must be triggered on a wrapper element.
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your <a>s, <wui-link>s and <router-link>s to avoid this behavior.

Target

The target is the trigger element (or component) that will trigger the tooltip. The target is specified via the target prop, and can be any of the following:

A string identifying the ID of the trigger element (or ID of the root element of a component)
A reference (ref) to an HTMLElement or an SVGElement (e.g. this.$refs.refName)
A reference (ref) to a component that has either an HTMLElement or SVGElement as its root element (e.g. this.$refs.refName)
A function (callback) that returns a reference to an HTMLElement or SVGElement

For more information on references, see the official Vue documentation.

Note:

The target element must exist in the document before <wui-tooltip> is mounted. If the target element is not found during mount, the tooltip will never open. Always place your <wui-tooltip> component lower in the DOM than your target element. This rule also applies if a callback function is used as target element, since that callback is called only once on mount.

HTMLElement refers to standard HTML elements such as <div>, <button>, etc, while SVGElement refers to <svg> or supported child elements of SVGs.

Positioning

Twelve options are available for positioning: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop, and leftbottom aligned. The default position is top. Positioning is relative to the trigger element.

Refer to the Tooltip directive documentation for live examples of positioning.

Triggers

Tooltips can be triggered (opened/closed) via any combination of click, hover and focus. The default trigger is hover focus. Or a trigger of manual can be specified, where the popover can only be opened or closed programmatically.

If a tooltip has more than one trigger, then all triggers must be cleared before the tooltip will close. I.e. if a tooltip has the trigger focus click, and it was opened by focus, and the user then clicks the trigger element, they must click it again and move focus to close the tooltip.

Caveats with `focus` trigger on `<button>` elements

For proper cross-browser and cross-platform behavior when using only the focus trigger, you must use an element that renders the <a> tag, not the <button> tag, and you also must include a tabindex="0" attribute.

The following will generate an <a> that looks like a button:

<wui-button href="#" tabindex="0" v-w-tooltip.focus title="Tooltip title">
  Link button with tooltip directive
</wui-button>

<wui-button id="link-button" href="#" tabindex="0">
  Link button with tooltip component
</wui-button>
<wui-tooltip target="link-button" title="Tooltip title" triggers="focus">
  Tooltip title
</wui-tooltip>

Making tooltips work for keyboard and assistive technology users

You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links, buttons, or form controls). Although arbitrary HTML elements (such as <span>s) can be made focusable by adding the tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.

Additionally, do not rely solely on hover as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard-only users.

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

<div>
  <span id="disabled-wrapper" class="display--inline-block" tabindex="0">
    <wui-button variant="primary" style="pointer-events: none;" disabled
      >Disabled button</wui-button
    >
  </span>
  <wui-tooltip target="disabled-wrapper">Disabled tooltip</wui-tooltip>
</div>

<!-- disabled-trigger-element.vue -->

`<wui-tooltip>` component usage

<wui-container fluid>
  <wui-row>
    <wui-col md="4" class="p-y-20">
      <wui-button id="button-1" variant="outline-success">Live chat</wui-button>
    </wui-col>
    <wui-col md="4" class="p-y-20">
      <wui-button id="button-2" variant="outline-success">Html chat</wui-button>
    </wui-col>
    <wui-col md="4" class="p-y-20">
      <wui-button ref="button-3" variant="outline-success"
        >Alternative chat</wui-button
      >
    </wui-col>
  </wui-row>

  <!-- Tooltip title specified via prop title -->
  <wui-tooltip target="button-1" title="Online!"></wui-tooltip>

  <!-- HTML title specified via default slot -->
  <wui-tooltip target="button-2" placement="bottom">
    Hello <strong>World!</strong>
  </wui-tooltip>

  <!-- Tooltip for an element identified by ref -->
  <wui-tooltip
    :target="() => $refs['button-3']"
    title="Alternative!"
  ></wui-tooltip>
</wui-container>

<!-- wui-tooltip-component.vue -->

Component options

Prop	Default	Description	Supported values
`target`	`null`	Element String ID, or a reference to an element or component, or a function returning either of them, that you want to trigger the tooltip Required	Any valid, in-document unique element ID, element reference or component reference or a function returning any such ID / reference
`title`	`null`	Tooltip content (text only, no HTML). if HTML is required, place it in the default slot	Plain text
`placement`	`'top'`	Tooltip position, relative to the trigger element	`top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, `rightbottom`
`fallback-placement`	`'flip'`	Auto-flip placement behaviour of the tooltip, relative to the trigger element	`flip`, `clockwise`, `counterclockwise`, or an array of valid placements evaluated from left to right
`triggers`	`'hover focus'`	Space separated list of event(s), which will trigger open/close of tooltip	`hover`, `focus`, `click`. Note `blur` is a special use case to close tooltip on next click, usually used in conjunction with `click`.
`no-fade`	`false`	Disable fade animation when set to `true`	`true` or `false`
`delay`	`50`	Delay showing and hiding of tooltip by specified number of milliseconds. Can also be specified as an object in the form of `{ show: 100, hide: 400 }` allowing different show and hide delays	`0` and up, integers only.
`offset`	`0`	Shift the center of the tooltip by specified number of pixels	Any negative or positive integer
`container`	`null`	Element string ID to append rendered tooltip into. If `null` or element not found, tooltip is appended to `<body>` (default)	Any valid in-document unique element ID.
`boundary`	`'scrollParent'`	The container that the tooltip will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll	`'scrollParent'` (default), `'viewport'`, `'window'`, or a reference to an HTML element.
`boundary-padding`	`5`	Amount of pixel used to define a minimum distance between the boundaries and the tooltip. This makes sure the tooltip always has a little padding between the edges of its container	Any positive number
`noninteractive`	`false`	Whether the tooltip should not be user-interactive	`true` or `false`
`variant`	`null`	Contextual color variant for the tooltip	Any contextual theme color variant name
`custom-class`	`null`	A custom classname to apply to the tooltip outer wrapper element	A string
`id`	`null`	An ID to use on the tooltip root element. If none is provided, one will automatically be generated. If you do provide an ID, it must be guaranteed to be unique on the rendered page	A valid unique element ID string

Noninteractive tooltips

WuiVue's tooltips are user-interactive by default for accessibility reasons. To restore WUI's default behavior apply the noninteractive prop:

<div class="text-center">
  <div>
    <wui-button id="tooltip-button-interactive"
      >My tooltip is interactive</wui-button
    >
    <wui-tooltip target="tooltip-button-interactive"
      >I will stay open when hovered</wui-tooltip
    >
  </div>

  <div class="m-t-15">
    <wui-button id="tooltip-button-not-interactive">Mine is not...</wui-button>
    <wui-tooltip target="tooltip-button-not-interactive" noninteractive
      >Catch me if you can!</wui-tooltip
    >
  </div>
</div>

<!-- wui-tooltip-interactive.vue -->

Variants and custom class

WuiVue's tooltips support contextual color variants via our custom CSS, via the variant prop:

<div class="text-center">
  <wui-button id="tooltip-button-variant">Button</wui-button>
  <wui-tooltip target="tooltip-button-variant" variant="danger"
    >Danger variant tooltip</wui-tooltip
  >
</div>

<!-- wui-tooltip-variant.vue -->

A custom class can be applied to the tooltip outer wrapper <div> by using the custom-class prop:

<div class="text-center">
  <wui-button id="my-button">Button</wui-button>
  <wui-tooltip target="my-button" custom-class="my-tooltip-class"
    >Tooltip Title</wui-tooltip
  >
</div>

variant and custom-class are reactive and can be changed while the tooltip is open.

Refer to the tooltip directive docs on applying variants and custom class to the directive version.

You can manually control the visibility of a tooltip via the syncable Boolean show prop. Setting it to true will show the tooltip, while setting it to false will hide the tooltip.

<template>
  <div class="text-center">
    <div>
      <wui-button id="tooltip-button-1" variant="primary"
        >I have a tooltip</wui-button
      >
    </div>

    <div class="m-t-15">
      <wui-button @click="show = !show">Toggle Tooltip</wui-button>
    </div>

    <wui-tooltip :show.sync="show" target="tooltip-button-1" placement="top">
      Hello <strong>World!</strong>
    </wui-tooltip>
  </div>
</template>
<script>
  export default {
    data: {
      show: true,
    },
  };
</script>

<!-- wui-tooltip-show-sync.vue -->

To make the tooltip shown on initial render, simply add the show prop on <wui-tooltip>:

<div class="text-center">
  <wui-button id="tooltip-button-2" variant="primary">Button</wui-button>
  <wui-tooltip show target="tooltip-button-2">I start open</wui-tooltip>
</div>

<!-- wui-tooltip-show-open.vue -->

Programmatic control can also be affected by submitting 'open' and 'close' events to the tooltip by reference.

<template>
  <div class="display--flex flex-column text-md-center">
    <div class="p-10">
      <wui-button id="tooltip-button-show-event" variant="primary"
        >I have a tooltip</wui-button
      >
    </div>

    <div class="p-10">
      <wui-button class="p-x-5" @click="onOpen">Open</wui-button>
      <wui-button class="p-x-5" @click="onClose">Close</wui-button>
    </div>

    <wui-tooltip ref="tooltip" target="tooltip-button-show-event">
      Hello <strong>World!</strong>
    </wui-tooltip>
  </div>
</template>

<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.tooltip.$emit("open");
      },
      onClose() {
        this.$refs.tooltip.$emit("close");
      },
    },
  };
</script>

<!-- wui-tooltip-show-ref-event.vue -->

You can also use $root events to trigger the showing and hiding of tooltip(s). See the Hiding and showing tooltips via $root events section below for details.

You can disable tooltip via the syncable Boolean prop disabled (default is false) Setting it to true will disable the tooltip. If the tooltip is currently visible when disabled is set to false, the tooltip will remain visible until it is enabled or programmatically closed. If the tooltip is disabled/enabled via $root events (see below), your disabled value will be updated as long as you have provided the .sync prop modifier.

<template>
  <div class="display--flex flex-column text-md-center">
    <div class="p-10">
      <wui-button id="tooltip-button-disable" variant="primary"
        >I have a tooltip</wui-button
      >
    </div>

    <div class="p-10">
      <wui-button @click="disabled = !disabled">
        { disabled ? 'Enable' : 'Disable' } Tooltip by prop
      </wui-button>
      <wui-button @click="disableByRef">
        { disabled ? 'Enable' : 'Disable' } Tooltip by $ref event
      </wui-button>

      <wui-tooltip
        :disabled.sync="disabled"
        ref="tooltip"
        target="tooltip-button-disable"
      >
        Hello <strong>World!</strong>
      </wui-tooltip>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        disabled: false,
      };
    },
    methods: {
      disableByRef() {
        if (this.disabled) {
          this.$refs.tooltip.$emit("enable");
        } else {
          this.$refs.tooltip.$emit("disable");
        }
      },
    },
  };
</script>

<!-- wui-tooltip-disable.vue -->

Note: In the above example, since we are using the default tooltip triggers of focus hover, the tooltip will close before it is disabled due to losing focus (and hover) to the toggle button.

You can also emit $root events to trigger disabling and enabling of tooltip(s). See the Disabling and enabling tooltips via $root events section below for details.

You can also emit $root events to trigger disabling and enabling of popover(s). See the Disabling and enabling tooltips via $root events section below for details.

`v-w-tooltip` directive usage

The v-w-tooltip directive makes adding tooltips even easier, without additional placeholder markup:

<wui-container fluid>
  <wui-row>
    <wui-col md="6" class="p-y-20">
      <wui-button v-w-tooltip title="Online!" variant="outline-success"
        >Live chat</wui-button
      >
    </wui-col>

    <wui-col md="6" class="p-y-20">
      <wui-button
        v-w-tooltip.html
        title="Hello <strong>World!</strong>"
        variant="outline-success"
      >
        Html chat
      </wui-button>
    </wui-col>
  </wui-row>
</wui-container>

<!-- wui-tooltip-directive.vue -->

Refer to the v-w-tooltip documentation for more information and features of the directive format.

'Global' $root instance events

Using $root instance it is possible to emit and listen events somewhere out of a component, where <wui-collapse> is used. In short, $root behaves like a global event emitters and listener. Details about $root instance can be found in the official Vue docs.

Hiding and showing tooltips via $root events

You can close (hide) all open tooltips by emitting the wv::hide::tooltip event on $root:

this.$root.$emit("wv::hide::tooltip");

To close a specific tooltip, pass the trigger element's id, or the id of the tooltip (if one was provided via the id prop), as the argument:

this.$root.$emit("wv::hide::tooltip", "my-trigger-button-id");

To open a specific tooltip, pass the trigger element's id, or the id of the tooltip (if one was provided via the id prop), as the argument when emitting the wv::show::tooltip $root event:

this.$root.$emit("wv::show::tooltip", "my-trigger-button-id");

To open all tooltips simultaneously, omit the id argument when emitting the wv::show::tooltip event.

These events work for both the component and directive versions of tooltip.

Note: the trigger element must exist in the DOM and be in a visible state in order for the tooltip to show.

Disabling and enabling tooltips via $root events

You can disable all open tooltips by emitting the wv::disable::tooltip event on $root:

this.$root.$emit("wv::disable::tooltip");

To disable a specific tooltip, pass the trigger element's id, or the id of the tooltip (if one was provided via the id prop), as the argument:

this.$root.$emit("wv::disable::tooltip", "my-trigger-button-id");

To enable a specific tooltip, pass the trigger element's id, or the id of the tooltip (if one was provided via the id prop), as the argument when emitting the wv::enable::tooltip $root event:

this.$root.$emit("wv::enable::tooltip", "my-trigger-button-id");

To enable all tooltips simultaneously, omit the id argument when emitting the wv::enable::tooltip event.

These events work for both the component and directive versions of tooltip.

Note: The trigger element must exist in the DOM in order for the tooltip to be enabled or disabled.

To listen to any tooltip opening, use:

export default {
  mounted() {
    this.$root.$on("wv::tooltip::show", (wvEvent) => {
      console.log("wvEvent:", wvEvent);
    });
  },
};

Refer to the Events section of documentation for the full list of events.

Accessibility

The trigger element, when the tooltip is showing, will have the attribute aria-describedby set with the auto generated ID of the tooltip.

Note: The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation for additional details.

Component reference

`<wui-tooltip>`

Properties

Property	Type	Default	Description
`boundary`	`HTMLElement` or `Object` or `String`	`'scrollParent'`	The boundary constraint of the tooltip: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement or component
`boundary-padding`	`Number` or `String`	`50`	The tooltip will try and stay away from the edge of the boundary element by the number of pixels specificed
`container`	`HTMLElement` or `Object` or `String`		The container element to append the rendered tooltip when visible. Default's to the body element
`custom-class`	`String`		CSS class (or classes) to apply to the tooltip's root element
`delay`	`Number` or `Object` or `String`	`50`	Value for the show and hide delay. Applies to both show and hide when specified as a number or string. Use object form to set show and hide delays individually
`disabled`	`Boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
`fallback-placement`	`Array` or `String`	`'flip'`	Placement to use when the tooltip would be out of boundaries. Refer to the docs for more details
`id`	`String`		Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
`no-fade`	`Boolean`	`false`	When set to `true`, disables the fade animation/transition on the component
`noninteractive`	`Boolean`	`false`	Wether the tooltip should not be user-interactive
`offset`	`Number` or `String`	`0`	Offset (in pixels) for the arrow center compared to the trigger target element
`placement`	`String`	`'top'`	Placement of the tooltip: One of 'top', 'bottom', 'right', 'left', 'topleft', 'topright', 'bottomleft', 'bottomright', 'lefttop', 'leftbottom', 'righttop', 'rightbottom'
`show`	`Boolean`	`false`	When set will show the tooltip
`target` Required	`HTMLElement` or `SVGElement` or `Function` or `Object` or `String`		Element string ID, or a reference to an element or component, that you want to trigger the tooltip
`title`	`String`		Text to place in the tooltip
`triggers`	`Array` or `String`	`'hover focus'`	Specify which triggers will show the tooltip. Supported values are 'click', 'hover', 'focus'. Refer to the docs for special triggers 'blur' and 'manual'
`variant`	`String`		Applies one of the WUI theme color variants to the component

Slots

Name	Description
`default`	Slot for tooltip content (HTML/components supported)

Events

Event	Arguments	Description
`wv::tooltip::disabled`	`wvEvent` - WvEvent object	Emitted on $root when tooltip becomes disabled
`wv::tooltip::enabled`	`wvEvent` - WvEvent object	Emitted on $root when tooltip becomes enabled
`wv::tooltip::hidden`	`wvEvent` - WvEvent object	Emitted on $root when tooltip is hidden
`wv::tooltip::hide`	`wvEvent` - WvEvent object. Cancelable	Emitted on $root when tooltip is about to be hidden. Cancelable. Call wvEvent.preventDefault() to cancel hide
`wv::tooltip::show`	`wvEvent` - WvEvent object. Cancelable	Emitted on $root when tooltip is about to be shown. Cancelable. Call wvEvent.preventDefault() to cancel show
`wv::tooltip::shown`	`wvEvent` - WvEvent object	Emitted on $root when tooltip is shown
`disabled`	`wvEvent` - WvEvent object	Emitted when tooltip becomes disabled
`enabled`	`wvEvent` - WvEvent object	Emitted when tooltip becomes enabled
`hidden`	`wvEvent` - WvEvent object	Emitted when tooltip is hidden
`hide`	`wvEvent` - WvEvent object. Cancelable	Emitted when tooltip is about to be hidden. Cancelable. Call wvEvent.preventDefault() to cancel hide
`show`	`wvEvent` - WvEvent object. Cancelable	Emitted when tooltip is about to be shown. Cancelable. Call wvEvent.preventDefault() to cancel show
`shown`	`wvEvent` - WvEvent object	Emitted when tooltip is shown

`$root` event listeners

Event	Arguments	Description
`wv::disable::tooltip`	`id` - Tooltip ID to disable (optional)	Disable all or a specific tooltip when this event is emitted on $root
`wv::enable::tooltip`	`id` - Tooltip ID to enable (optional)	Enable all or a specific tooltip when this event is emitted on $root
`wv::hide::tooltip`	`id` - Tooltip ID to hide (optional)	Close (hide) all or a specific open tooltip when this event is emitted on $root
`wv::show::tooltip`	`id` - Tooltip ID to show (optional)	Open (show) all or a specific tooltip when this event is emitted on $root

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export
`<wui-tooltip>`	WuiTooltip

Example

import { WuiTooltip } from "@wui/wui-vue/lib/tooltip";
Vue.component("wui-tooltip", WuiTooltip);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`TooltipPlugin`	wui/wui-vue/lib/tooltip

This plugin also automatically includes the following plugins:

WBTooltipPlugin

Example

import { TooltipPlugin } from "@wui/wui-vue/lib/tooltip";
Vue.use(TooltipPlugin);

From WUI and

with

WUI is wescale’s design system

Tooltip

A tooltip is a floating, non-actionable item to communicate extra information related to an element on the screen. The additional information should be contextual, useful, and nonessential.

Example

Usage

wui-tooltip

When to use the `wui-tooltip`

Native tooltip

When to use the native tooltip

WUI decisions

Description

Overview

Target

Positioning

Triggers

Caveats with `focus` trigger on `<button>` elements

Making tooltips work for keyboard and assistive technology users

Disabled elements

`<wui-tooltip>` component usage

Component options

Noninteractive tooltips

Variants and custom class

Programmatically show and hide tooltip

Programmatically disabling tooltip

`v-w-tooltip` directive usage

'Global' $root instance events

Hiding and showing tooltips via $root events

Disabling and enabling tooltips via $root events

Listening to tooltip changes via $root events

Accessibility

Component reference

`<wui-tooltip>`

Properties

Slots

Events

`$root` event listeners

Importing individual components

Importing as a Vue.js plugin

Tooltip

A tooltip is a floating, non-actionable item to communicate extra information related to an element on the screen. The additional information should be contextual, useful, and nonessential.

Example

Usage

wui-tooltip

When to use the wui-tooltip

Native tooltip

When to use the native tooltip

WUI decisions

Description

Overview

Target

Positioning

Triggers

Caveats with focus trigger on <button> elements

Making tooltips work for keyboard and assistive technology users

Disabled elements

<wui-tooltip> component usage

Component options

Noninteractive tooltips

Variants and custom class

Programmatically show and hide tooltip

Programmatically disabling tooltip

v-w-tooltip directive usage

'Global' $root instance events

Hiding and showing tooltips via $root events

Disabling and enabling tooltips via $root events

Listening to tooltip changes via $root events

Accessibility

Component reference

<wui-tooltip>

Properties

Slots

Events

$root event listeners

Importing individual components

Importing as a Vue.js plugin

When to use the `wui-tooltip`

Caveats with `focus` trigger on `<button>` elements

`<wui-tooltip>` component usage

`v-w-tooltip` directive usage

`<wui-tooltip>`

`$root` event listeners