Prevent Safari from showing tooltip when text overflow is hidden with ellipsis

Question

How can I completely remove the default browser tooltip displayed when hovering over a truncated part of text in a link?

Text is truncated because of a css ellipsis rule :

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

When I apply these rules to a fixed width div, I get a html tooltip. (Only in Safari, not in Firefox or Chrome.)

Here is a jsfiddle.

I tried adding a JS preventDefault and adding an empty title attribute, but none of these work.

Answer 1

The ability to show tooltips for elements with text overflow cut off with ellipsis that don't have a non-empty title is part of WebKit core, but it's turned off by default. Only Safari overrides that and has the behavior enabled. There's no way to turn that off from your application code.

As a work-around, add an empty block element inside the element that has the overflow hidden with text-overflow: ellipsis. This can be done either for real, as @bas's answer already shows, or by creating a pseudo-element with CSS:

&::after {
  content: '';
  display: block;
}

(using SCSS syntax). If you use Sass and create a mixin encapsulating the hiding of text overflow with ellipsis, this can be a nice addition without the need for any extra HTML mark-up.

Answer 2

I was also not allwed to use pointer-events:none, because it is a link. I was inspired by the answer of user1271033. The examples did not work for me, but adding an empty div before the text inside the truncated div worked for me.

Example:

    <div style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;width:50px;">
         <div></div>
         Test test test
    </div>