Search code examples
cssinternet-explorertooltipinternet-explorer-10

Tooltip doesn't work on IE 10

I am wondering why my tool tip doesn't work on IE 10. I checked the attributes and I don't find any are not supported by IE 10. It works fine on IE 11 and Chrome. Any ideas? Thank you very much!!

.badge:hover::before {
  visibility: visible;
}

.badge::before {
  content: attr(data-name);
  visibility: hidden;
}
<br>
<div class="badge apple" data-name="Apple">A</div>

Solution

  • My smart colleague found this -- It's IE 10 bug. The solution is here -- ::after on :hover does not work in IE

    But I choose not to add empty #ID:hover block, because it will be ignored by minifier

        /**
     * Fix for IE10 bug. This block could be empty, but the minifier would remove it.
     */
    #id:hover {
      cursor: pointer;
    }