title: Tooltip screen reader will read text of but text to remain visually hidden
body: <p>I am trying to find a way that the screen reader will read the bubble text inside of tooltip icon, without actually having to display the text in the browser. In other words, its okay to display it inside the bubble that appears when the screen reader tabs over to the tooltip icon and reads the text, but so far the only way screen reader will read the text is if I hard code the text in the DOM if that makes sense.</p>
  
  <p>So this is what I have:</p>
  
  <pre><code>&lt;div class="sub-item content-spaced"&gt;
    &lt;span class="text"&gt;{{translations.taxEstLabel}}&lt;/span&gt;
    {{#hasEstimatedTax}}
    &lt;span class="value"&gt;{{totalEstimatedTax}}&lt;/span&gt;
    {{/hasEstimatedTax}}
    {{^hasEstimatedTax}}
    &lt;div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"&gt;&lt;span
        style="display:none"&gt;{{translations.taxEstMessage}}&lt;/span&gt;&lt;/div&gt;
    {{/hasEstimatedTax}}
  &lt;/div&gt;
  </code></pre>
  
  <p>I just want screen reader to read whats inside of <code>data-info-text</code> attribute, but it looks like the screen reader does not work that way. So I tried to create a span element with the text inside, but visually hiding the span element, but that hides the message from the screen reader and thus cannot read it.</p>
  
  <p>Any suggestions out there? I have tried different things but I am new to the world of accessibility.</p>