Stop Safari from displaying tooltip when text overflow is set to hide with ellipsis

Question

Stop Safari from displaying tooltip when text overflow is set to hide with ellipsis

Is there a way to completely eliminate the default browser tooltip that appears when hovering over truncated text within a link?

The text is being truncated due to the following CSS ellipsis rule:

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

After applying these rules to a fixed width div, an HTML tooltip seems to appear (specifically in Safari, not in Firefox or Chrome.)

Check out this jsfiddle link.

I have attempted using JS with preventDefault and adding an empty title attribute, but neither have been successful.

javascript html css safari tooltip

Answer 1

Answer №1

The feature allowing tooltips to display for elements with truncated text and no title attribute is a part of the WebKit core, but it is not enabled by default. Safari is the only browser that overrides this setting and enables the behavior. Unfortunately, there is no way to disable this feature using your application code.

To work around this issue, you can insert an empty block element inside the element that has the overflow hidden with text-overflow: ellipsis. This can be implemented as shown in @bas's answer or by creating a pseudo-element with CSS:

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

(using SCSS syntax). If you are using Sass, you can create a mixin that handles hiding text overflow with ellipsis, adding a useful feature without requiring additional HTML markup.

Answer 2

The feature allowing tooltips to display for elements with truncated text and no title attribute is a part of the WebKit core, but it is not enabled by default. Safari is the only browser that overrides this setting and enables the behavior. Unfortunately, there is no way to disable this feature using your application code.

To work around this issue, you can insert an empty block element inside the element that has the overflow hidden with text-overflow: ellipsis. This can be implemented as shown in @bas's answer or by creating a pseudo-element with CSS:

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

(using SCSS syntax). If you are using Sass, you can create a mixin that handles hiding text overflow with ellipsis, adding a useful feature without requiring additional HTML markup.

Answer 3

Answer №2

I found myself in a situation where I couldn't use the code pointer-events:none because it was being used as a link. After reading a helpful response from user1271033, I experimented with different solutions. While some examples didn't quite do the trick for me, I discovered that inserting an empty div before the text within the truncated div solved my issue.

Here is an example of how I implemented this workaround:

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

Answer 4

I found myself in a situation where I couldn't use the code pointer-events:none because it was being used as a link. After reading a helpful response from user1271033, I experimented with different solutions. While some examples didn't quite do the trick for me, I discovered that inserting an empty div before the text within the truncated div solved my issue.

Here is an example of how I implemented this workaround:

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

Answer 5

Answer №3

Have you considered trying out this ? It might be a good fit for your needs. Here are some examples:

<div class="name-holder">veryveryverylongname</div>
.name-holder {
    overflow: hidden;
    text-overflow: ellipsis;
    ...
    &:before {
        content: '';
        display: block;
    }

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

Answer 6

Have you considered trying out this ? It might be a good fit for your needs. Here are some examples:

<div class="name-holder">veryveryverylongname</div>
.name-holder {
    overflow: hidden;
    text-overflow: ellipsis;
    ...
    &:before {
        content: '';
        display: block;
    }

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

Answer 7

Answer №4

In order to remove the tooltip feature in Safari, you can use the pointer-events: none; property in your CSS. Keep in mind that this will disable all pointer events, including links.

Answer 8

In order to remove the tooltip feature in Safari, you can use the pointer-events: none; property in your CSS. Keep in mind that this will disable all pointer events, including links.

Answer 9

Answer №5

Include some CSS in your code

 pointer-events: none;

You can even create a new CSS style and apply it wherever necessary.

Here is an example of how you can do it:

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

Take a look

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

Answer 10

Include some CSS in your code

 pointer-events: none;

You can even create a new CSS style and apply it wherever necessary.

Here is an example of how you can do it:

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

Take a look

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

Stop Safari from displaying tooltip when text overflow is set to hide with ellipsis

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Strange outcomes observed with array created from HTML code

What is the best way to implement a background image onto a card using state in React?

Facing issues connecting to my MongoDB database as I keep encountering the error message "Server Selection Timed Out After 3000ms" on MongoDB Compass

The Spring Boot and Angular Fusion Application

Guide to installing angular-ui-bootstrap through npm in angularjs application

utilizing ng-option to present choices in a dropdown menu

What is the best way to name a force-directed Graph using d3?

What are some creative ways to represent data using different numerical intervals?

Exporting variables in node.js allows you to share data between different

Is there a way to determine the image type from a link like this?

What is the best way to eliminate the occurrence of the word 'undefined' from the cycle output?

Collaborative spreadsheet feature within a browser-based software platform

Angular country selection dropdown featuring national flags

Having trouble with innerHTML.value functionality?

What methods can I use to evaluate the efficiency of my website?

Tips for enforcing validation rules at the class level using Angular's version of jQuery Validate

Utilizing base classes in callbacks with ES6 in NodeJS

Modifying the value of an item within a two-dimensional array

What steps are involved in managing and retrieving data within session storage?

applying various conditions to JavaScript arrays for filtering