Create accessible InfoTooltip Component

Adds a global reusable component that will display
the info icon with accesible markup.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5f7ee4a45e19ce851b3eff705d722517db07c0bf

3 files changed, 35 insertions, 2 deletions

diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
new file mode 100644
index 00000000..15141660
--- /dev/null
+++ b/src/components/Global/InfoTooltip.vue
@@ -0,0 +1,30 @@
+<template>
+  <b-button v-b-tooltip variant="link" class="btn-tooltip" :title="title">
+    <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
+    <icon-tooltip />
+  </b-button>
+</template>
+
+<script>
+import IconTooltip from '@carbon/icons-vue/es/information/16';
+
+export default {
+  components: { IconTooltip },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.btn-tooltip {
+  padding: 0;
+  line-height: 1em;
+  svg {
+    vertical-align: baseline;
+  }
+}
+</style>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 277db0b8..699b0164 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -14,7 +14,8 @@
       "selected": "Selected"
     },
     "ariaLabel": {
-      "showPassword": "Show password as plain text. Note: this will visually expose your password on the screen."
+      "showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
+      "tooltip": "Tooltip"
     },
     "form": {
       "fieldRequired": "Field required",
diff --git a/src/main.js b/src/main.js
index 7117c54d..4b0722e2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,7 +23,8 @@ import {
   NavbarPlugin,
   NavPlugin,
   TablePlugin,
-  ToastPlugin
+  ToastPlugin,
+  TooltipPlugin
 } from 'bootstrap-vue';
 import Vuelidate from 'vuelidate';
 import i18n from './i18n';
@@ -85,6 +86,7 @@ Vue.use(NavbarPlugin);
 Vue.use(NavPlugin);
 Vue.use(TablePlugin);
 Vue.use(ToastPlugin);
+Vue.use(TooltipPlugin);
 Vue.use(Vuelidate);
 
 new Vue({