CSS ComponentThe latest version of this package is: 14.29.10, Opens in new window
Popovers provide additional information upon interaction.
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/popover@14.29.10
Table of Contents
Edit this section, Opens in new windowUsage
Markup
<div
class="if popover [small] [red] [top|left|right|bottom] [is-open]"
aria-hidden="true"
aria-labelledby="popover-title-1601904511145"
aria-describedby="popover-text-1601904511145"
role="dialog"
style="visibility: visible; left: 118px;"
>
<button class="if close" type="button" aria-label="Close"></button>
<span class="if title" id="popover-title-1601904511145">Vilket år blev du ägare?</span>
<span class="if text" id="popover-text-1601904511145">
Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.
Försäkringen är en trygghet för dig som äger hus.
</span>
</div>
As validation message
<div class="if popover is-open bottom red">
<button type="button" class="if close" aria-label="Close"></button>
<span class="if text">
Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.
Försäkringen är en trygghet för dig som äger hus.
</span>
</div>
Small
<div class="if popover small is-open right">
<span class="if text">Vilket år blev du ägare?</span>
</div>
Position of popover
Use the JS lib @ids-js/popover for initialization and positioning.
Auto-generated
Any element:
<element
data-popover="[top|left|right|bottom]"
data-popover-title="…"
data-popover-text="…"
class="if …"
aria-label="…"
…
></element>
Accessibility
<input class="if input-field" type="text" title="Your name" />
Do not use a title
-attribute to provide information for input fields
<label class="if" or="tooltip-example-input">
Your Name
</label>
<input class="if input-field" type="text" id="tooltip-example-input" />
Use an element that fits the component
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.24.0 (2022-05-23)
Features
Documentation Updates
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
14.9.0 (2022-03-03)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
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 fromif-design-system
toids-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 popover is now in a separate package: @ids-js/popover
Documentation Updates
-
✏️ Move position of the quick links (5cb0897)
-
✏️ Remove unneeded margins for shortcuts (36c7e8d)
-
✏️ Separate out CSS and JS documentation (2996460) , closes #467386
-
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
💡 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
bootstrap (6fc1ed8)
reinstall (da80dba)
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
bootstrap (d23e139)
- 🤖 Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
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)
12.7.2 (2021-06-01)
Bug Fixes
- 🐛 Fix arrow for red popover (5bbb481)
Documentation Updates
-
✏️ Update docs regarding red popover and positioning (b432bd5)
-
🤖 Update preprocessor files for popover (59a0a38)
-
🤖 Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
12.1.0 (2021-05-07)
Bug Fixes
-
🐛 Amend styling for popover (339fa69)
-
🐛 Make popover changes backwards compatible (898abbf)
-
🐛 Use spacing horizontally when no title is present (7644167)
Code Refactoring
- 💡 Modularize popover and tweak design (62f9bd0)
Documentation Updates
- ✏️ Update popover documentation (f9da660)
Miscellaneous chores
12.0.0 (2021-05-05)
⚠ BREAKING CHANGES
- 🧨 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
- 🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
- 🧨 Footer is now renamed to Global Footer
Features
Bug Fixes
- 🐛 Update references (c08f107)
Code Refactoring
Miscellaneous chores
-
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
-
🤖 Finalize breakpoint token conversion (f50ea0d)
-
🤖 Reinstall (2c763ea)
-
🤖 Reinstall (69e1a5b)
-
🤖 Update all design token references (c640d15)
-
🤖 Update references to util variables (b79ec36)
-
🤖 Updating links (70f166e)
rebuild (7edb430)
-
🤖 Rename Change Log to Changelog (d412e63)
-
🤖 Remove all references to sketch (35fc554) , closes #339203
-
🤖 Update package fields (200c0af)
10.0.0 (2021-02-15)
⚠ BREAKING CHANGES
- 🧨 form-group is now renamed to input-wrapper, a more logical name
Code Refactoring
7.1.0 (2020-11-16)
Features
6.43.3 (2020-11-03)
Miscellaneous chores
reinstall (2cefe15)
6.36.0 (2020-10-12)
Miscellaneous chores
- 🤖 Add what-input to demo and dev files (56801b7)
6.35.2 (2020-10-06)
Bug Fixes
- 🐛 Adjust popover positioning and update documentation (b110bef)
6.29.4 (2020-09-09)
Documentation Updates
- ✏️ Use correct strong element with if class (6b484df)
6.29.3 (2020-09-07)
Documentation Updates
- ✏️ Merge atoms/molecules/organisms into components (90ed590)
6.26.12 (2020-08-03)
Documentation Updates
- ✏️ Update documentation for the new registry (3e7ba20)
Miscellaneous chores
-
🤖 lerna bootstrap (d835ec9)
-
🤖 Temporarily remove package-lock.json-files (87b3f7f)
-
🤖 Update references to new scope (b5575dd)
6.26.10 (2020-07-14)
Miscellaneous chores
-
🤖 Manually update some links (ecc0133)
-
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)
6.23.0 (2020-07-01)
Miscellaneous chores
reinstall (1ab1527)
6.22.0 (2020-07-01)
Features
- 🎸 Add new color categories, update documentation (5496822)
Documentation Updates
- ✏️ Update documentation layout (816053b)
Miscellaneous chores
6.21.6 (2020-06-11)
Miscellaneous chores
- 🤖 Remove .zip files from .npmignore (b3bc7dc)
6.19.0 (2020-06-02)
Miscellaneous chores
reinstall (3416c65)
6.15.5 (2020-05-15)
Miscellaneous chores
-
prepped and ready to separate documentation site from code (d3e1fd9)
-
pruning and reinstalling (5cda0bc)
reinstall (939dae6)
reinstall (cae55fb)
- Remove livingcss data and add frontmatter data (b384946)
6.15.4 (2020-05-14)
Miscellaneous chores
- lerna bootstrap (0c4f599)
6.15.2 (2020-05-11)
Miscellaneous chores
- reinstall and build (aedc097)
6.15.0 (2020-05-07)
Miscellaneous chores
6.10.9 (2020-04-22)
Miscellaneous chores
-
🤖 Add *.zip-files to .npmignore-files (062b8b0)
-
🤖 Remove references to verb in package.json files (cfdaaec)
6.10.6 (2020-04-17)
Miscellaneous chores
- 🤖 lerna bootstrap (d8faf26)
6.9.1 (2020-04-16)
Documentation Updates
- ✏️ Use correct badge color in README.md (03b563e)
6.6.0 (2020-04-09)
Documentation Updates
- ✏️ Change edit this document to edit this section (791b646)
6.4.3 (2020-04-03)
Bug Fixes
- 🐛 Revert positional top left right bottom from 0 to auto (f06d59a)
6.4.2 (2020-04-03)
Bug Fixes
- 🐛 Remove misuse of unset, none, auto and initial (87624d7)
6.3.4 (2020-04-01)
Miscellaneous chores
- 🤖 Use more of if styling on documentation site (2eaf386)
6.3.2 (2020-03-31)
Documentation Updates
- ✏️ Replace sg.message with if.notification (5d1aa99)
5.2.0 (2020-03-17)
Code Refactoring
- 💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother
5.1.0 (2020-03-15)
Features
Documentation Updates
- Adjust documentation (4236510)
5.0.4 (2020-03-14)
Miscellaneous chores
5.0.1-alpha.160 (2020-03-12)
Miscellaneous chores
5.0.1-alpha.149 (2020-03-05)
Miscellaneous chores
-
🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables
-
🤖 Starting to align components to new baseline grid (cf2c073)
-
Align typography to baseline. First attempt (f4447e9)
5.0.1-alpha.147 (2020-03-02)
Miscellaneous chores
5.0.1-alpha.145 (2020-02-26)
Miscellaneous chores
- lerna bootstrap (91ace79)
5.0.1-alpha.143 (2020-02-26)
Documentation Updates
- ✏️ Some tweaks (4db6b23)
5.0.1-alpha.142 (2020-02-26)
Features
- 🎸 Add preprocessor files for popover (6fa8639)
Bug Fixes
- 🐛 Adjust popover design and placement (b1bbeb4)
5.0.1-alpha.120 (2020-02-17)
Bug Fixes
- 🐛 Mixin usage in popover.styl (0aaa28b)
5.0.1-alpha.117 (2020-02-06)
Documentation Updates
- ✏️ Add edit links to documentation files (7c6e770)
5.0.1-alpha.79 (2019-12-03)
Documentation Updates
- ✏️ Scope all examples to .if (26bd7cd)
5.0.1-alpha.70 (2019-11-28)
Miscellaneous chores
- 🤖 Remove polymer, updated styling accordingly (04e1941)
5.0.1-alpha.67 (2019-11-26)
Bug Fixes
- 🐛 Use package-based imports (6822233)
5.0.1-alpha.62 (2019-11-24)
Miscellaneous chores
- 🤖 Some documentation fixes (8d66129)
5.0.1-alpha.58 (2019-11-22)
Features
- 🎸 Remove normalize.css (2c23c2b)
Miscellaneous chores
5.0.1-alpha.57 (2019-11-22)
Miscellaneous chores
- 🤖 lerna bootstrap (99e08e6)
5.0.1-alpha.42 (2019-11-05)
Miscellaneous chores
- 🤖 lerna bootstrap (c8fb43e)
5.0.1-alpha.40 (2019-11-05)
Bug Fixes
- 🐛 Fix typography based on latest sketches (2653b61)
5.0.1-alpha.38 (2019-11-04)
Miscellaneous chores
- 🤖 Add autocomplete off on form examples (8e933f3)
5.0.1-alpha.35 (2019-11-01)
Features
- 🎸 Add first iteration of moodboards (f73703d)
5.0.1-alpha.33 (2019-10-31)
Features
- 🎸 Add popover (4dfd08b)
Bug Fixes
- 🐛 Sync package-lock.json. lerna bootstrap (60b5077)
Miscellaneous chores
- 🤖 Finalize popover (69e005a)