aria tooltip displaying on view page - should be hidden

Question

I am trying to add a tooltip to some of my elements which will be read by a page reader. The tooltip shouldn't be displayed as an element in the view page which currently my case. It should be hidden and only visible to a page reader.

Here is what i have so far:

View Page:

<div id="listIcon" data-bind="text: name"></div>
   <div class="tooltip" role="tooltip" aria-hidden="true" id="listIcon">User Name</div>

CSS:

div.tooltip {
  display: inline;
  margin-left: 10px;
  padding: 2px 5px;
  background: #ffe;
  z-index: 10;
  border: 2px solid black;
}
div.tooltip[aria-hidden="true"] {
  display: none;
}

For some reason it is not hidden and it is still displayed.