Back to Popover-guidelines

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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/popover@14.29.10
Vilket år blev du ägare?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.

Table of Contents

Edit this section, Opens in new window

Usage

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

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.
<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

Vilket år blev du ägare?
<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>
Edit this section, Opens in new window

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

Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Edit this section, Opens in new window

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

  • design-tokens: add Design Tokens and CSS Variables to Popover (00a3c96) , closes #607645

Documentation Updates

  • popover: convert html examples to using MDX/React components instead (83f9252) , closes #607646

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

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

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

  • 💡 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

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

bootstrap (d23e139)

  • 🤖 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)

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

  • 🐛 Manually set firstPublished and lastModified (e83af7d)

  • 🐛 We don't need lastModified (e458a12)

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

  • 🤖 Documentation cleanup (1deeceb)

  • 🤖 Remove reference to validaiton tooltip (347f2eb)

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

  • 🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

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

  • 💡 Rename form-group to input-wrapper (7ee3bae)

  • reinstall packages (fcfacf4)

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600) , closes #309650

6.43.3 (2020-11-03)

Miscellaneous chores

  • 🤖 Manually set version (e4d9ca6)

  • 🤖 Rename repository from guybrush to if-design-system (c18bccd)

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

  • 🤖 Rename darkRed to red for status color (ba76a92)

  • 🤖 Search and replace old color usage (3e5abb0)

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

6.15.2 (2020-05-11)

Miscellaneous chores

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

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

  • 🎸 Add close feature for popovers (2d3a070)

  • 🎸 Add tooltips to popover (19977aa)

Documentation Updates

5.0.4 (2020-03-14)

Miscellaneous chores

  • 🤖 Delete really old install files, update README files (c5d4893)

  • 🤖 Remove .npmrc fles (4e26249)

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

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

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

5.0.1-alpha.42 (2019-11-05)

Miscellaneous chores

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

Bug Fixes

  • 🐛 Sync package-lock.json. lerna bootstrap (60b5077)

Miscellaneous chores

Edit this section, Opens in new window
Contact us, Opens in new window