Back to Tooltip-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Tooltip are meant to be a hint or tip on what a tool or other interaction does.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/tooltip@14.1.0

The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appearβ€”a small "hover box" with information about the item being hovered over. Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).

Table of Contents

Edit this section, Opens in new window


The animation delay on tooltips in text, i.e. usage of abbr, is longer (0.8s) than the animation delay on other tooltip items (0.2s). This is done to ensure a better user experience.

<abbr data-tooltip="A tooltip" title="A tooltip" class="if">graphical user interface</abbr>
<span data-tooltip="A tooltip" title="A tooltip" class="if tooltip">graphical user interface</span>

To be able to use this, you must use the JS from @ids-js/tooltip for this to work properly!

Edit this section, Opens in new window


Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)


  • πŸ€– Rename util to utils (f78721f)

Code Refactoring

  • πŸ’‘ Rename scope and repository (3ea5423)
  • πŸ’‘ Use new navigation structure for documentation (415aee5), closes #490579


  • ✏️ Split out CSS documentation (0ff1527), closes #467386
  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579


  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The JS for the Tooltip is now in a separate scope: @ids-js/tooltip

13.11.0 (2021-10-19)


  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • πŸ› Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

  • πŸ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

12.13.0 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • πŸ› Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • πŸ› Manually set firstPublished and lastModified (e83af7d)
  • πŸ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring


  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 The Tooltip component is now extracted from the Popover component
Edit this section, Opens in new window
Contact us, Opens in new window