Popover buttons

assets/styles/scss/demo.scss

@@ -97,6 +97,26 @@ div#sholo-popover-item {
     }
   }
 
+  .sholo-popover-footer {
+    display: block;
+    clear: both;
+    a {
+      display: inline-block;
+      padding: 3px 10px;
+      border: 1px solid #d4d4d4;
+      text-decoration: none;
+      text-shadow: 1px 1px 0 #fff;
+      color: #333;
+      font: 11px/normal sans-serif;
+      cursor: pointer;
+      outline: 0;
+      background-color: #ececec;
+      border-radius: 2px;
+      zoom: 1;
+      margin: 10px 0 0;
+    }
+  }
+
   .sholo-popover-title {
     font-size: 19px;
     margin: 0 0 5px;

index.html

@@ -13,6 +13,13 @@
   <div class="sholo-popover-tip"></div>
   <div class="sholo-popover-title">Did you know?</div>
   <div class="sholo-popover-description">You can make step by step introductions with sholo!</div>
+  <div class="sholo-popover-footer">
+    <a href="javascript:void(0)">Close</a>
+    <span class="sholo-btn-group">
+      <a href="javascript:void(0)">Previous</a>
+      <a href="javascript:void(0)">Next</a>
+    </span>
+  </div>
 </div>
 <div class="page-wrap">
   <section class="section__header" data-sholo="Hey welcome to presenter!">
@@ -62,11 +69,11 @@
 
 <script src="./assets/scripts/dist/sholo.js"></script>
 <script>
-    const sholo = new Sholo({
-      animate: true,
-      opacity: 0.8,
-      padding: 5
-    });
+  const sholo = new Sholo({
+    animate: true,
+    opacity: 0.8,
+    padding: 5
+  });
 
 
   document.querySelector('.btn__example')