deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-26 09:20:15 +02:00
Code Issues Projects Releases Wiki Activity

update popovers to new syntax

Browse source
This commit is contained in:
rhyneav 2018-01-02 10:30:17 -05:00
parent ef936d86a5
commit 3ff3f23828
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
docs/content/docs/components/popovers.md
View file

@ -8,40 +8,40 @@ You can add popovers, also called tooltips, on your elements. popover attribute
<div class="row flex-spaces">
<div class="sm-3 col">
<p popover="Popover on left" popover-position="left">Popover left position</p>
<p popover-left="Popover on left">Popover left position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on top" popover-position="top">Popover top position</p>
<p popover-top="Popover on top">Popover top position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
<p popover-bottom="Popover on bottom">Popover bottom position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on right" popover-position="right">Popover right position</p>
<p popover-right="Popover on right">Popover right position</p>
</div>
</div>
#### Code:
```html
<p popover="Popover on left" popover-position="left">Popover left position</p>
<p popover="Popover on top" popover-position="top">Popover top position</p>
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
<p popover="Popover on right" popover-position="right">Popover right position</p>
<p popover-left="Popover on left">Popover left position</p>
<p popover-top="Popover on top">Popover top position</p>
<p popover-bottom="Popover on bottom">Popover bottom position</p>
<p popover-right="Popover on right">Popover right position</p>
```
But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...
<div class="row flex-center">
<div class="sm-6 col">
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
<button popover-top="Popover on top">Popover on top and on a button!</button>
</div>
</div>
#### Code:
```html
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
<button popover-top="Popover on top">Popover on top and on a button!</button>
```