From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/popovers.html | 314 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 314 insertions(+) create mode 100644 docs/components/popovers.html (limited to 'docs/components/popovers.html') diff --git a/docs/components/popovers.html b/docs/components/popovers.html new file mode 100644 index 0000000..fc9226c --- /dev/null +++ b/docs/components/popovers.html @@ -0,0 +1,314 @@ + + + + Popovers - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Popovers

+
+
+ + + +
+
+ + +
+
+

Popovers are small overlay content containers. Popovers component is built entirely in CSS.

+
+
+
top popover +
+
+
+
Apple
+
Software and hardware
+
+
To make a contribution to the world by making tools for the mind that advance humankind.
+
+ +
+
+
+
+
+
+
right popover +
+
+
+
Apple
+
Software and hardware
+
+
To make a contribution to the world by making tools for the mind that advance humankind.
+
+ +
+
+
+
+
+
+
bottom popover +
+
+
+
Apple
+
Software and hardware
+
+
To make a contribution to the world by making tools for the mind that advance humankind.
+
+ +
+
+
+
+
+
+
left popover +
+
+
+
Apple
+
Software and hardware
+
+
To make a contribution to the world by making tools for the mind that advance humankind.
+
+ +
+
+
+
+
+
+

Wrap an element by a container with the popover class. + And add a container with the popover-container next to the element. + You can use Cards component inside the popover-container. +

+

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. + By default, the popovers appear above the element. +

+ 
<div class="popover popover-right">
+  <button class="btn btn-primary">right popover</button>
+  <div class="popover-container">
+    <div class="card">
+      <div class="card-header">
+        ...
+      </div>
+      <div class="card-body">
+        ...
+      </div>
+      <div class="card-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-26-gb76a