From 1be6b41e1be3d2316abcb5dec6968383b5a6f856 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 16 Apr 2020 12:03:38 -0700
Subject: 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 | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/Global/InfoTooltip.vue

(limited to 'src/components/Global')

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>
-- 
cgit v1.2.3