The Help Tooltip component displays help on click

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/help-tooltip@16.0.28

Preview

<button class="if help-tooltip-button" type="button" aria-expanded="false" aria-label="More information"></button>
<div
    class="if help-tooltip-popover [is-open]"
    aria-hidden="false"
    aria-labelledby="<title-identifier>"
    aria-describedby="<text-identifier>"
    role="dialog"
>
    <button class="if close" type="button" aria-label="Close"></button>
    [<span class="if title" id="<title-identifier>">Title</span>]
    <span class="if text" id="<text-identifier>">Text</span>
</div>

Positioning

Here is a js snippet on how to positon the Help Tooltip, taken from the webcomponent:

…
const _medium_mq = window.matchMedia(`screen and (min-width: ${SizeBreakpointMinXs})`);
let _is_medium_mq = true;

const _handleMedium = mql => {
    if (mql.matches) {
        _is_medium_mq = true;
    } else {
        _is_medium_mq = false;
    }
};

_medium_mq.addListener(_handleMedium);

_handleMedium(_medium_mq);

…

const _setPosition = () => {
    const _button_rect = _button_el.getBoundingClientRect();
    const _popover_rect = _popover_el.getBoundingClientRect();
    const _arrow_left_if_popover_overflow = _button_el.offsetLeft + _button_rect.width / 2 - 12;

    const VH = window.innerHeight;
    if (!_is_medium_mq) {
        const _mobile_popover_rect = _popover_el.getBoundingClientRect();

        _popover_el.style.left = `${_popover_el.getBoundingClientRect().left - _popover_el.offsetLeft - 24}px`;

        if (VH / 2 - _mobile_popover_rect.height < _button_rect.top) {
            _popover_el.style.top = `${_button_el.offsetTop - _mobile_popover_rect.height - _button_rect.height}px`;
            _popover_el.classList.remove('bottom');
        } else {
            _popover_el.style.top = `${_button_rect.height + 24}px`;
            _popover_el.classList.add('bottom');
        }

        _popover_el.style.setProperty('--ids-popover-arrow-vertical-position', `${_button_el.offsetTop}px`);
        _popover_el.style.setProperty(
            '--ids-popover-arrow-horizontal-position',
            `${_arrow_left_if_popover_overflow < 0 ? 0 : _arrow_left_if_popover_overflow}px`
        );
    } else {
        _popover_el.style.setProperty('--ids-popover-arrow-vertical-position', 'calc(50% - 12px)');
        _popover_el.style.setProperty('--ids-popover-arrow-horizontal-position', 'calc(50% - 12px)');
        _popover_el.style.left = _button_el.offsetLeft + _button_rect.width / 2 - _popover_rect.width / 2 + 'px';

        if (_popover_el.getBoundingClientRect().left < 24) {
            _popover_el.style.left = '0px';
            _popover_el.style.setProperty('--ids-popover-arrow-vertical-position', `${_button_el.offsetTop}px`);
            _popover_el.style.setProperty(
                '--ids-popover-arrow-horizontal-position',
                `${_arrow_left_if_popover_overflow < 0 ? 0 : _arrow_left_if_popover_overflow}px`
            );
        }

        if (VH / 2 - _popover_el.getBoundingClientRect().height < _button_rect.top) {
            _popover_el.style.top = `${
                _button_el.offsetTop - _popover_el.getBoundingClientRect().height - _button_rect.height
            }px`;
            _popover_el.classList.remove('bottom');
        } else {
            _popover_el.style.top = `${_button_rect.height + 24}px`;
            _popover_el.classList.add('bottom');
        }
    }
};
…

Edit this section

Change Log

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

14.29.2 (2022-10-11)

Bug Fixes

help-tooltip: add missing popover variables to help-tooltip (04eeaf7)

14.24.4 (2022-06-15)

Documentation Updates

add missing title segment (a9d9bb4)

14.22.2 (2022-05-03)

Miscellaneous chores

package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

🤖 Bootstrap (6822f5b)

14.8.1 (2022-02-23)

Bug Fixes

🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

use correct versions (f1b5deb)
Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
rebuild and reinstall (f9fb687)

reinstall (885c74b)

fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

🧨 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!

Documentation Updates

✏️ Move position of the quick links (5cb0897)
✏️ Remove unneeded margins for shortcuts (36c7e8d)
✏️ Split out CSS and Webcomponent documentation (1561e82) , closes #467386
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
✏️ Use correct js references in examples/dev/demo (f41c249)

Code Refactoring

💡 Categorize components (9965266) , closes #490579
💡 Reduce spacing tokens, use correct size tokens (97aa461)
💡 Rename scope and repository (3ea5423)
💡 Use new navigation structure for documentation (415aee5) , closes #490579
another change in the structure (38a0d2e)

Miscellaneous chores

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

bootstrap (6fc1ed8)

fix all old references to util (d57bf17)
prepare for merge (0184490)

reinstall (da80dba)

Rename scope and repo (257684e)
use correct version for utils (49e72d9)

13.11.0 (2021-10-19)

Features

🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

🐛 Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Documentation Updates

✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

🐛 Update repository urls (3dae3a3) , closes #465976

13.6.1 (2021-09-15)

Bug Fixes

🐛 Use correct classnames for input label (74bb2cf)

13.6.0 (2021-09-08)

Documentation Updates

Use default shortcut listing for demo links (a746602)

13.3.1 (2021-09-02)

Documentation Updates

✏️ Add js implementation relevant code for positioning (9dc0f23) , closes #458872
🤖 Use node v14 (4009973)

bootstrap (d23e139)

13.1.2 (2021-08-31)

Documentation Updates

✏️ Fix package name of webcomponent npm install script (df64cd8)
🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
🤖 Reinstall (e660696)
🤖 Update published date (61e7ccf)

12.7.0 (2021-05-28)

Features

🎸 Add webcomponent for Help Tooltip (79f2989) , closes #410894

12.6.0 (2021-05-27)

Bug Fixes

🐛 Manually set firstPublished and lastModified (e83af7d)
🐛 We don't need lastModified (e458a12)

12.1.0 (2021-05-07)

Features

🎸 Add new component, help tooltip (f210e3b)

Bug Fixes

🐛 Give correct focus styling for the webcomponent (73d7fc1)
🐛 Move layout resets before left spacing (99ae3a3)
🐛 Use spacing horizontally when no title is present (7644167)

Documentation Updates

✏️ Amend help tooltip documentation (37c4e0e)

Miscellaneous chores

🤖 Documentation cleanup (1deeceb)
🤖 Working with help-tooltip (3733de6)
Use correct version (f052b60)

Edit this section

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

Table of Contents

Usage

Required markup

Positioning

Changelog

Change Log

14.29.2 (2022-10-11)

Bug Fixes

14.24.4 (2022-06-15)

Documentation Updates

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.18.3 (2022-04-13)

Bug Fixes

14.16.0 (2022-04-07)

Bug Fixes

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.2.2 (2021-12-10)

Code Refactoring

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

Documentation Updates

Code Refactoring

Miscellaneous chores

13.11.0 (2021-10-19)

Features

13.9.2 (2021-09-30)

Bug Fixes

13.7.0 (2021-09-22)

Documentation Updates

13.6.3 (2021-09-17)

Bug Fixes

13.6.1 (2021-09-15)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

13.3.1 (2021-09-02)

Documentation Updates

13.1.2 (2021-08-31)

Documentation Updates

12.14.1 (2021-08-12)

Miscellaneous chores

12.13.1 (2021-08-11)

Bug Fixes

12.7.0 (2021-05-28)

Features

12.6.0 (2021-05-27)

Bug Fixes

12.1.0 (2021-05-07)

Features

Bug Fixes

Documentation Updates

Miscellaneous chores