<template>
  <i :title="tooltipText">
    <span class="sr-only" v-html=srHtml></span>
  </i>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    alt: String,
    srOnly: Boolean
  },
  data: function() {
    return {
      tooltipText: this.srOnly ? null : this.alt.replace(/~/g, ''),
      srHtml: this.alt.replace(/~/g, '&nbsp;')
    };
  }
}
</script>
