commit 1be6b41e1be3d2316abcb5dec6968383b5a6f856
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Thu Apr 16 12:03:38 2020 -0700
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Thu Apr 16 12:05:58 2020 -0700
tree 0d235faf964e1bbf888689737fb4eefe250a44dd
parent edb9e852fd43ec9de857a91675113c0fcc4e8414

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

src/components/Global/InfoTooltip.vue

diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
new file mode 100644
index 0000000..1514166
--- /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>

src/locales/en-US.json

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 277db0b..699b016 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",

src/main.js

diff --git a/src/main.js b/src/main.js
index 7117c54..4b0722e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,7 +23,8 @@
   NavbarPlugin,
   NavPlugin,
   TablePlugin,
-  ToastPlugin
+  ToastPlugin,
+  TooltipPlugin
 } from 'bootstrap-vue';
 import Vuelidate from 'vuelidate';
 import i18n from './i18n';
@@ -85,6 +86,7 @@
 Vue.use(NavPlugin);
 Vue.use(TablePlugin);
 Vue.use(ToastPlugin);
+Vue.use(TooltipPlugin);
 Vue.use(Vuelidate);
 
 new Vue({