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

1 files changed, 30 insertions, 0 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>