Back to Help Tooltip-guidelines
CSS ComponentThe latest version of this package is: 14.0.0, Opens in new window
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@14.0.0
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
<button class="if help-tooltip-button" type="button" 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');
}
}
};
โฆ
Changelog
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)
chore
- ๐ค Rename util to utils (f78721f)
Code Refactoring
- ๐ก Rename scope and repository (3ea5423)
- ๐ก Use new navigation structure for documentation (415aee5), closes #490579
Documentation
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!
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.6.3 (2021-09-17)
Bug Fixes
13.6.1 (2021-09-15)
Bug Fixes
- ๐ Use correct classnames for input label (74bb2cf)
12.13.1 (2021-08-11)
Bug Fixes
12.7.0 (2021-05-28)
Features
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)
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)
Features
- ๐ธ Add new component, help tooltip (f210e3b)