Back to Popover-guidelines

CSS ComponentThe latest version of this package is: 14.0.0, 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.0.0

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

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

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

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

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

12.13.1 (2021-08-11)

Bug Fixes

12.7.2 (2021-06-01)

Bug Fixes

  • 🐛 Fix arrow for red popover (5bbb481)

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)

12.0.0 (2021-05-05)

Bug Fixes

Code Refactoring

Features

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

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

10.0.0 (2021-02-15)

Code Refactoring

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

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

7.1.0 (2020-11-16)

Features

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

6.35.2 (2020-10-06)

Bug Fixes

  • 🐛 Adjust popover positioning and update documentation (b110bef)

6.22.0 (2020-07-01)

Features

  • 🎸 Add new color categories, update documentation (5496822)

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)

5.1.0 (2020-03-15)

Features

  • 🎸 Add close feature for popovers (2d3a070)
  • 🎸 Add tooltips to popover (19977aa)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

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

Bug Fixes

  • 🐛 Adjust popover design and placement (b1bbeb4)

Features

  • 🎸 Add preprocessor files for popover (6fa8639)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • 🐛 Mixin usage in popover.styl (0aaa28b)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.7.2 (2021-06-01)

Bug Fixes

  • 🐛 Fix arrow for red popover (5bbb481)

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)

12.0.0 (2021-05-05)

Bug Fixes

Code Refactoring

Features

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

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

10.0.0 (2021-02-15)

Code Refactoring

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

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

7.1.0 (2020-11-16)

Features

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

6.35.2 (2020-10-06)

Bug Fixes

  • 🐛 Adjust popover positioning and update documentation (b110bef)

6.22.0 (2020-07-01)

Features

  • 🎸 Add new color categories, update documentation (5496822)

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)

5.1.0 (2020-03-15)

Features

  • 🎸 Add close feature for popovers (2d3a070)
  • 🎸 Add tooltips to popover (19977aa)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

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

Bug Fixes

  • 🐛 Adjust popover design and placement (b1bbeb4)

Features

  • 🎸 Add preprocessor files for popover (6fa8639)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • 🐛 Mixin usage in popover.styl (0aaa28b)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

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

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.35 (2019-11-01)

Features

  • 🎸 Add first iteration of moodboards (f73703d)

5.0.1-alpha.33 (2019-10-31)

Bug Fixes

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

Features

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