[Tooltip / Popover] add custom-css prop. (close #292)

Author: wxsms

docs/pages/components/Popover.md

@@ -195,6 +195,7 @@ Name                  | Type       | Default       | Required | Description
 `show-delay`          | Number     | 0             |          | (0.30.0+) Delay showing the Popover (ms).
 `hide-delay`          | Number     | 0             |          | (0.30.0+) Delay hidding the Popover (ms).
 `viewport`            | String or Function |       |          | (0.31.0+) Keeps the popover within the bounds of this element. Example: viewport: '#viewport'. If a function is given, it is called with the triggering element DOM node as its only argument.
+`custom-class`        | String     |               |          | (0.33.0+) Apply a custom css class to the popover.
 
 ### Slots
 

docs/pages/components/Tooltip.md

@@ -161,6 +161,7 @@ Name                  | Type       | Default       | Required | Description
 `show-delay`          | Number     | 0             |          | (0.30.0+) Delay showing the tooltip (ms).
 `hide-delay`          | Number     | 0             |          | (0.30.0+) Delay hidding the tooltip (ms).
 `viewport`            | String or Function |       |          | (0.31.0+) Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport'. If a function is given, it is called with the triggering element DOM node as its only argument.
+`custom-class`        | String     |               |          | (0.33.0+) Apply a custom css class to the tooltip.
 
 ### Events
 

src/directives/popover/popover.js

@@ -13,7 +13,8 @@ const bind = (el, binding) => {
       appendTo: binding.arg && '#' + binding.arg,
       title: binding.value && binding.value.title && binding.value.title.toString(),
       content: binding.value && binding.value.content && binding.value.content.toString(),
-      viewport: binding.value && binding.value.viewport && binding.value.viewport.toString()
+      viewport: binding.value && binding.value.viewport && binding.value.viewport.toString(),
+      customClass: binding.value && binding.value.customClass && binding.value.customClass.toString()
     }
   })
   let options = []

src/directives/tooltip/tooltip.js

@@ -12,7 +12,8 @@ const bind = (el, binding) => {
       target: el,
       appendTo: binding.arg && '#' + binding.arg,
       text: typeof binding.value === 'string' ? (binding.value && binding.value.toString()) : (binding.value && binding.value.text && binding.value.text.toString()),
-      viewport: binding.value && binding.value.viewport && binding.value.viewport.toString()
+      viewport: binding.value && binding.value.viewport && binding.value.viewport.toString(),
+      customClass: binding.value && binding.value.customClass && binding.value.customClass.toString()
     }
   })
   let options = []

src/mixins/popupMixin.js

@@ -59,7 +59,8 @@ export default {
       default: true
     },
     target: null,
-    viewport: null
+    viewport: null,
+    customClass: String
   },
   data () {
     return {
@@ -206,7 +207,7 @@ export default {
         this.showTimeoutId = setTimeout(() => {
           // add to dom
           if (!popUpAppendedContainer) {
-            popup.className = `${this.name} ${this.placement} fade`
+            popup.className = `${this.name} ${this.placement} ${this.customClass ? this.customClass : ''} fade`
             let container = document.querySelector(this.appendTo)
             container.appendChild(popup)
             this.resetPosition()