add FormHelp component

Author: isneezy

example/src/components/FormsPage.vue

@@ -67,6 +67,20 @@
                                         </grid-col>
                                     </grid-row>
                                 </form-group>
+                                <form-group>
+                                    <form-label>Zip Code</form-label>
+                                    <grid-row class="gutters-xs">
+                                        <grid-col sm>
+                                            <form-input placeholder="Search for..."/>
+                                        </grid-col>
+                                        <grid-col class="col-auto align-self-center">
+                                            <form-help>
+                                                <p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
+                                                <p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>
+                                            </form-help>
+                                        </grid-col>
+                                    </grid-row>
+                                </form-group>
                             </grid-col>
                             <grid-col md="6" lg="4">
                                 <form-group>

package.json

@@ -32,6 +32,7 @@
     "vue": "^2.5.16"
   },
   "dependencies": {
+    "popper.js": "^1.14.3",
     "tabler-ui": "^0.0.32",
     "vue-popperjs": "^1.3.4"
   }

src/components/Form/FormHelp.vue

@@ -0,0 +1,15 @@
+<template>
+    <span class="form-help">?
+            <div class="arrow" style="left: 129px;"></div>
+    </span>
+</template>
+
+<script>
+  export default {
+    name: "form-help"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/index.js

@@ -2,6 +2,7 @@ import FormCheckbox from './FormCheckbox'
 import FormFileInput from './FormFileInput'
 import FormGroup from './FormGroup'
 import FormGroupAddon from './FormGroupAddon'
+import FormHelp from './FormHelp'
 import FormInput from './FormInput'
 import FormInputIcon from './FormInputIcon'
 import FormInputGroup from './FormInputGroup'
@@ -18,6 +19,7 @@ export {
   FormInputIcon,
   FormGroup,
   FormGroupAddon,
+  FormHelp,
   FormInput,
   FormInvalidFeedback,
   FormInputGroup,

src/components/index.js

@@ -17,6 +17,7 @@ import * as Site from './Site'
 import StampCard from './StampCard'
 import StatsCard from './StatsCard'
 import * as Table from './Table'
+import Popper from './Popper'
 
 export const components = {
     ...Alert,
@@ -37,5 +38,6 @@ export const components = {
     ...Site,
     StampCard,
     StatsCard,
-    ...Table
+    ...Table,
+    Popper
 }

src/directives/index.js

@@ -1,5 +1,7 @@
 import ClickOutside from './ClickOutSide'
+import Popover from './popover'
 
 export default {
-    ClickOutside
+    ClickOutside,
+    Popover
 }