Popover
Basic Popover and Sizes
<div class="popover">...</div>
<div class="popover -medium">...</div>
<div class="popover -large">...</div>
<div class="popover -xlarge">...</div>
If no size is specified, the default size will be small. The size classes are .medium, .large and .xlarge
Typography Usage in a Popover
Some header
Some cool body text is here to tell about the story of this super rad popover and how it ended up being part of the Anduin Component Library.
Some header
Some cool body text is here to tell about the story of this super rad popover and how it ended up being part of the Anduin Component Library.
Some header
Some cool body text is here to tell about the story of this super rad popover and how it ended up being part of the Anduin Component Library.
<div class="popover">
<h3 class="header">Some header</h3>
<p>Some text</p>
</div>
<div class="popover txt-center">...</div>
<div class="popover txt-right">...</div>
It is not a requirement to have a header text in popovers. However, if you decide to add one, make sure to only use h3 or h4 only. Text alignment can be left, center or right (by default text is left aligned). In order to change text alignment, please use utility classes .txt-center or .txt-right
Popover with Links
// Here's the markup for the popover above
<div class="popover">
<ul class="list">
<li class="item"><a href="javascript:void(0)">Click me!</a></li>
<li class="item"><a href="javascript:void(0)">No, click me!</a></li>
<li class="divider"></li>
<li class="item"><a href="javascript:void(0)" class="disabled">You can't click me</a></li>
</ul>
</div>
This is a popover with a list of links. To separate different links, use a .divider
Popover Positions
.-top-left.-top.-top-right.-left-top.-left.-left-bottom.-right-top.-right.-right-bottom.-bottom-left.-bottom-right<div class="popover -top-left">...</div>
<div class="popover -top">...</div>
<div class="popover -top-right">...</div>
<div class="popover -left-top">...</div>
<div class="popover -left">...</div>
<div class="popover -left-bottom">...</div>
<div class="popover -right-top">...</div>
<div class="popover -right">...</div>
<div class="popover -right-bottom">...</div>
<div class="popover -bottom-left">...</div>
<div class="popover">...</div>
<div class="popover -bottom-right">...</div>
The default popover position (if not specified) is bottom
Popover in Action
// Here's the markup for the setup above
<div class="popover-wrapper">
<button class="btn -primary">Your Button</button>
<div class="popover -top">
...
</div>
</div>
The popover and its trigger mechanism should be wrapped around a .popover-wrapper for it to be able to work and positioned correctly.