Prevent Safari From Showing Tooltip When Text Overflow Is Hidden With Ellipsis

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-ov

Solution 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.

Solution 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 testtest
    </div>

Solution 3:

How about this http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html ? Maybe it will be suit you. Examples:

<divclass="text-container">longlonglonglongname</div>
.text-container {
    overflow: hidden;
    text-overflow: ellipsis;
    ...
    &:before {
        content: '';
        display: block;
    }

<divclass="text-container"data-name="longlonglonglongname"></div>
 .text-container {
     overflow: hidden;
     text-overflow: ellipsis;
     ...
     &:before {
         content: attr(data-name);
     }

Solution 4:

You can disable the tooltip in Safari by setting pointer-events: none; in the CSS. Be aware though, this disables all pointer events, so if it's a link, then the link will disable as well.

Solution 5:

Add css in your code

pointer-events: none;

Even you can create new css for it and apply wherever required.

You can do it in this way :

<divid="fix"title=""><ahref="http://www.google.com"><spanstyle="pointer-events:none;">Lorem ipsum dolor sit amet</span></a></div>

Have a looke

https://jsfiddle.net/poojagayake/tx06vq09/1/