Popovers should be used to display contextual information to the user. It can be used as a simple tooltip or for more complex content such as a preview panel.
A popover can accept the following nubbin position classes:
.joy-nubbin--left.joy-nubbin--left-top.joy-nubbin--left-bottom.joy-nubbin--top-left.joy-nubbin--top-right.joy-nubbin--right-top.joy-nubbin--right-bottom.joy-nubbin--bottom-left.joy-nubbin--bottom-rightPopovers are built by combining the .joy-popover class and one of the nubbin classes listed above.
<div class="joy-popover joy-nubbin--left" role="dialog">
<div class="joy-popover__header"></div>
<div class="joy-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
</div>Tooltips should be used to provide additional information about an input field or an element on the page. Tooltips are usually displayed on hover or active state and only contain helper text.
<div class="joy-popover joy-popover--tooltip joy-nubbin--bottom" role="tooltip">
<div class="joy-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
</div>