Запретить Safari отображать всплывающую подсказку, когда переполнение текста скрыто многоточием

Как я могу полностью удалить всплывающую подсказку браузера по умолчанию, отображаемую при наведении курсора на усеченную часть текста в ссылке?

Текст усекается из-за правила css с многоточием:

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

Когда я применяю эти правила к div фиксированной ширины, я получаю всплывающую подсказку в формате html. (Только в Safari, но не в Firefox или Chrome.)

Вот jsfiddle.

Я попытался добавить JS preventDefault и добавить пустой атрибут title, но ничего из этого не работает.


javascript html css safari tooltip
person Vincent Duprez    schedule 07.01.2014    source источник
comment
Ваша скрипка настроена неправильно ... Предполагаю, что это тип OSX, не видя всплывающей подсказки в окнах.   -  person epascarello    schedule 07.01.2014
comment
@epascarello вы пробовали в сафари на окнах?   -  person Vincent Duprez    schedule 07.01.2014
comment
Это не устанавливалось годами ... Вы пытались установить пустой атрибут заголовка для элемента?   -  person epascarello    schedule 07.01.2014
comment
да пробовал..результата нет   -  person Vincent Duprez    schedule 07.01.2014
comment
Вы нашли решение/обходной путь для предотвращения встроенной всплывающей подсказки? Пожалуйста, поделитесь на всякий случай.   -  person manoj    schedule 08.07.2014
comment
нет, я не нашел решения.   -  person Vincent Duprez    schedule 08.07.2014
comment
@manoj, пожалуйста, найдите обходной путь в ответе hon2a. Я знаю, что опоздал на 6 лет, но все же... :P   -  person Allan Jebaraj    schedule 25.09.2020

Ответы (5)


arrow_upward
14
arrow_downward

Возможность показывать всплывающие подсказки для элементов с переполнением текста, обрезанным многоточием, которые не имеют непустого title, является частью ядра WebKit, но по умолчанию она отключена. Только Safari переопределяет это и включает поведение. Невозможно отключить это из кода вашего приложения.

В качестве обходного пути добавьте пустой блочный элемент внутрь элемента, у которого переполнение скрыто с помощью text-overflow: ellipsis. Это можно сделать либо по-настоящему, как уже показывает ответ @bas, либо создав псевдоэлемент с помощью CSS:

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

(с использованием синтаксиса SCSS). Если вы используете Sass и создаете миксин, инкапсулирующий скрытие переполнения текста с помощью многоточия, это может быть хорошим дополнением без необходимости дополнительной HTML-разметки.

person hon2a    schedule 11.05.2017
comment
::after следует использовать вместо ::before, иначе overflow и text-overflow контейнера не будут работать в IE и Edge. - person pallxk; 28.07.2017
comment
Это должен быть принятый ответ. И да, ::after следует использовать, чтобы он работал во всех браузерах. - person Allan Jebaraj; 25.09.2020
comment
@jfroy Я только что выяснил основную причину и абстрагировал чистую версию обходного пути. Но если бы мне пришлось угадывать, я бы предположил, что встроенные всплывающие подсказки могут отображать только текст и могут безопасно сделать вывод об этом только из встроенного содержимого. - person hon2a; 21.10.2020

arrow_upward
6
arrow_downward

Мне также не разрешалось использовать pointer-events:none, потому что это ссылка. Меня вдохновил ответ пользователя 1271033. Примеры у меня не сработали, но мне помогло добавление пустого div перед текстом внутри усеченного div.

Пример:

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

arrow_upward
1
arrow_downward

Как насчет этого http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html ? Может вам подойдет. Примеры:

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

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

arrow_upward
0
arrow_downward

Вы можете отключить всплывающую подсказку в Safari, установив указатели-события: none; в ССЦ. Имейте в виду, однако, что это отключает все события указателя, поэтому, если это ссылка, то ссылка также будет отключена.

person stinogle    schedule 17.07.2014

arrow_upward
-1
arrow_downward

Добавьте css в свой код

 pointer-events: none;

Даже вы можете создать новый css для него и применить везде, где это необходимо.

Вы можете сделать это следующим образом:

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

посмотри

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

person Pooja-G    schedule 02.01.2017
comment
спасибо, что раскопали, к сожалению, это ссылка, поэтому ее нужно видеть курсором, и она уже была предложена другим ответом - person Vincent Duprez; 02.01.2017
comment
@VincentDuprez Я использую это из диапазона, и у меня это работает нормально. Я думаю, вы должны попробовать хотя бы один раз. - person Pooja-G; 02.01.2017
comment
Я запускаю ваш код jsfiddle в браузере Safari, и он работает на моей стороне. - person Pooja-G; 03.01.2017
comment
Я говорил про ссылку, ссылка уже не работает - person Vincent Duprez; 03.01.2017