Implement Popover Custom class

Gruntfile.js

@@ -15,10 +15,9 @@ module.exports = function(grunt) {
         ' * <%= pkg.name %>\n' +
         ' * v<%= pkg.version %>\n' +
         ' * <%= pkg.description %>\n' +
-        ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> - <%= pkg.homepage %>\n' +
+        ' * Copyright (c) 2017 - <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> - <%= pkg.homepage %>\n' +
         ' * License: <%= pkg.license %>\n' +
-        ' */\n\n',
-      filename : 'bootstrap-tooltip-custom-class'
+        ' */\n\n'
     },
     sass: sassConfig,
     less: lessConfig,

README.md

@@ -1,7 +1,9 @@
 # Bootstrap Tooltip Custom Class
-Extend Bootstrap Tooltip plugin by adding custom classes to tooltips. Available for **Bootstrap 3** and **Bootstrap 4**.
+Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for **Bootstrap 3** and **Bootstrap 4**.
 
-Define your own custom class or use the predefined custom classes: `.tooltip-primary`, `.tooltip-success`, `.tooltip-info`, `.tooltip-warning`, `.tooltip-danger`.
+Define your own custom class or use the predefined custom classes: 
+- tooltips: `.tooltip-primary`, `.tooltip-success`, `.tooltip-info`, `.tooltip-warning`, `.tooltip-danger`.
+- popovers: `.popover-primary`, `.popover-success`, `.popover-info`, `.popover-warning`, `.popover-danger`.
 
 
 ![Bootstrap Tooltip Custom Class Preview](https://i.imgur.com/CNoQ13w.png)
@@ -21,7 +23,11 @@ yarn add bootstrap-tooltip-custom-class
 
 ## Setup
 
-**Use the appropriate files according to Bootstrap version that you use.**
+**The implementations for [Tooltips][1] and [Popovers][2] are independent. You can include them together or you can use them separately.**
+
+**Use the appropriate files according to Bootstrap version that you use: `bootstrap-v3`, `bootstrap-v4` or `bootstrap-v4-alpha`.**
+
+### Tooltips
 
 #### CSS
 Include `bootstrap-tooltip-custom-class.css` in your project or use the `.scss` file:
@@ -57,29 +63,74 @@ Include the script after Bootstrap's main javascript file:
 <script src="bootstrap-tooltip-custom-class.js"></script>
 ```
 
+### Popovers
+#### CSS
+Include `bootstrap-popover-custom-class.css` in your project or use the `.scss` file:
+```html
+<link rel="stylesheet" href="bootstrap-popover-custom-class.css" media="all" />
+```
+#### SASS:
+```sass
+@import "bootstrap-popover-custom-class";
+```
+Use the mixin `popover-custom` to create styles for your custom popover:
+````sass
+.popover-custom {
+  @include popover-custom(#f2653c, #fff);
+}
+````
+
+#### Less (only for Bootstrap v3):
+```less
+@import "bootstrap-popover-custom-class.less";
+```
+Use the mixin `popover-custom`:
+````less
+.popover-custom {
+  .popover-custom(#f2653c, #fff);
+}
+````
+
+#### Javascript
+Include the script after Bootstrap's main javascript file:
+```html
+<script src="bootstrap.js"></script>
+<script src="bootstrap-popover-custom-class.js"></script>
+```
+
 ## Usage
 
 - Use `data-custom-class` attribute:
 
 ```html
 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-custom" title="Custom tooltip example">Tooltip example</button>
 ```
+```html
+<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-custom-class="popover-custom" title="Custom popover example" data-content="Vivamus sagittis lacus vel augue laoreet">Popover example</button>
+```
 
 or
 
 - Use `customClass` parameter on plugin initialization:
 ```javascript
 $(function () {
-  $('.my-element').tooltip({
+  $('.has-tooltip').tooltip({
     customClass: 'tooltip-custom'
   });
 });
 ```
+```javascript
+$(function () {
+  $('.has-popover').popover({
+    customClass: 'popover-custom'
+  });
+});
+```
 
 ## Demo
 
 #### Local
-Local demo files can be found in the `demo` folder of each project (`bootstrap-v3`, `bootstrap-v4`, `bootstrap-v4-alpha`).
+Local demo files can be found in the `demo` folder of each project.
 First, execute the following instructions in the root:
 
 ```
@@ -96,3 +147,5 @@ $ npm run build-#project_alias# (or) npm run build-all
 - Bootstrap 3: [Codepen](https://codepen.io/andreivictor/full/gmNeJq)
 
 
+[1]: #tooltips
+[2]: #popovers

bootstrap-v3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-tooltip-custom-class",
-  "description": "Extend Bootstrap Tooltip plugin by adding custom classes. For Bootstrap v3.",
+  "description": "Extends Bootstrap Tooltips and Popovers by adding custom classes. For Bootstrap v3.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/andreivictor/bootstrap-tooltip-custom-class.git"

bootstrap-v3/popover/demo/demo.css

@@ -0,0 +1,88 @@
+.popover-primary .popover-title {
+  background: #337ab7;
+  color: #fff;
+}
+
+.popover-success .popover-title {
+  background: #5cb85c;
+  color: #fff;
+}
+
+.popover-info .popover-title {
+  background: #5bc0de;
+  color: #fff;
+}
+
+.popover-warning .popover-title {
+  background: #f0ad4e;
+  color: #fff;
+}
+
+.popover-danger .popover-title {
+  background: #d9534f;
+  color: #fff;
+}
+
+.popover-custom .popover-title {
+  background: #f2653c;
+  color: #ffffff;
+}
+
+.popover-custom-alt .popover-title {
+  background: #5b2da3;
+  color: #ffffff;
+}
+
+body {
+  padding-top: 50px;
+}
+
+#topnav {
+  z-index: 1061;
+}
+
+#topnav .navbar-header {
+  float: left;
+}
+
+#topnav .navbar-right {
+  float: right !important;
+  margin: 0 -15px 0 0;
+}
+
+@media (max-width: 340px) {
+  #topnav .navbar-brand {
+    font-size: 14px;
+  }
+}
+
+#topnav .navbar-nav > li > a {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+
+#topnav .navbar-nav > li > a > i {
+  font-size: 26px;
+}
+
+.bs-example {
+  position: relative;
+  margin: 15px;
+  padding: 15px 15px 25px;
+  border: 1px solid #ddd;
+  border-radius: 4px 4px 0 0;
+}
+
+.bs-example .btn {
+  margin: 5px;
+}
+
+.bs-example__title {
+  margin-bottom: 20px;
+}
+
+.bs-example--static .popover {
+  position: relative;
+  display: inline-block;
+  margin: 20px;
+}

bootstrap-v3/popover/demo/demo.js

@@ -0,0 +1,9 @@
+$(document).ready(function(){
+    $('.btn-default').popover();
+    $('.btn-custom').popover({
+        customClass: 'popover-custom'
+    });
+    $('.btn-custom-alt').popover({
+        customClass: 'popover-custom-alt'
+    });
+});

bootstrap-v3/popover/demo/demo.scss

@@ -0,0 +1,64 @@
+@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
+@import "../src/scss/bootstrap-popover-custom-class";
+
+.popover-custom {
+  @include popover-custom(#f2653c, #ffffff);
+}
+
+.popover-custom-alt {
+  @include popover-custom(#5b2da3, #ffffff);
+}
+
+//== Demo layout
+//
+//##
+body {
+  padding-top: 50px;
+}
+
+#topnav {
+  z-index: ($zindex-popover + 1);
+
+  .navbar-header {
+    float: left;
+  }
+  .navbar-right {
+    float: right !important;
+    margin: 0 -15px 0 0;
+  }
+  @media (max-width: 340px) {
+    .navbar-brand {
+      font-size: $font-size-base;
+    }
+  }
+
+  .navbar-nav>li>a {
+    padding-top: 11px;
+    padding-bottom: 11px;
+  }
+
+  .navbar-nav>li>a>i {
+    font-size: 26px;
+  }
+}
+
+.bs-example {
+  position: relative;
+  margin: 15px;
+  padding: 15px 15px 25px;
+  border: 1px solid #ddd;
+  border-radius: 4px 4px 0 0;
+}
+.bs-example .btn {
+  margin: 5px;
+}
+
+.bs-example__title {
+  margin-bottom: 20px;
+}
+
+.bs-example--static .popover {
+  position: relative;
+  display: inline-block;
+  margin: 20px;
+}