Cegah Safari menampilkan keterangan alat saat luapan teks disembunyikan dengan elipsis

Bagaimana cara menghapus sepenuhnya tooltip browser default yang ditampilkan saat mengarahkan kursor ke bagian teks yang terpotong di tautan?

Teks terpotong karena aturan elipsis css :

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

Ketika saya menerapkan aturan ini ke div dengan lebar tetap, saya mendapatkan tooltip html. (Hanya di Safari, bukan di Firefox atau Chrome.)

Ini jsfiddle.

Saya mencoba menambahkan JS preventDefault dan menambahkan atribut title kosong, tetapi tidak ada yang berhasil.


javascript html css safari tooltip
person Vincent Duprez    schedule 07.01.2014    source sumber
comment
Biola Anda tidak diatur dengan benar... Menebak ini jenis OSX, tidak melihat tooltip di windows.   -  person epascarello    schedule 07.01.2014
comment
@epascarello sudahkah Anda mencoba safari di windows?   -  person Vincent Duprez    schedule 07.01.2014
comment
Belum menginstalnya selama bertahun-tahun... Apakah Anda mencoba menyetel atribut judul kosong pada elemen?   -  person epascarello    schedule 07.01.2014
comment
ya saya mencoba .. tidak ada hasil   -  person Vincent Duprez    schedule 07.01.2014
comment
Apakah Anda menemukan solusi/solusi untuk mencegah tooltip asli? Silakan bagikan untuk berjaga-jaga.   -  person manoj    schedule 08.07.2014
comment
tidak, saya tidak menemukan solusi apa pun.   -  person Vincent Duprez    schedule 08.07.2014
comment
@manoj tolong temukan solusinya di jawaban hon2a. Aku tahu aku terlambat 6 tahun tapi tetap saja... :P   -  person Allan Jebaraj    schedule 25.09.2020

Jawaban (5)


arrow_upward
14
arrow_downward

Kemampuan untuk menampilkan keterangan alat untuk elemen dengan luapan teks yang terpotong dengan elipsis yang tidak memiliki title yang tidak kosong adalah bagian dari inti WebKit, namun dinonaktifkan secara default. Hanya Safari yang menimpanya dan mengaktifkan perilaku tersebut. Tidak ada cara untuk mematikannya dari kode aplikasi Anda.

Sebagai solusinya, tambahkan elemen blok kosong di dalam elemen yang luapannya disembunyikan dengan text-overflow: ellipsis. Ini dapat dilakukan secara nyata, seperti yang sudah ditunjukkan oleh jawaban @bas, atau dengan membuat elemen semu dengan CSS:

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

(menggunakan sintaks SCSS). Jika Anda menggunakan Sass dan membuat mixin yang merangkum penyembunyian teks yang meluap dengan elipsis, ini bisa menjadi tambahan yang bagus tanpa memerlukan mark-up HTML tambahan.

person hon2a    schedule 11.05.2017
comment
::after harus digunakan sebagai pengganti ::before, jika tidak, overflow & text-overflow wadah tidak akan berfungsi di IE dan Edge. - person pallxk; 28.07.2017
comment
Ini harus menjadi jawaban yang diterima. Dan ya, ::after harus digunakan agar berfungsi di semua browser. - person Allan Jebaraj; 25.09.2020
comment
@jfroy Saya baru saja menemukan akar masalahnya dan mengabstraksi versi bersih dari solusi tersebut. Namun jika saya harus menebak, menurut saya tooltip asli hanya dapat menampilkan teks dan hanya dapat menyimpulkannya dengan aman dari konten sebaris. - person hon2a; 21.10.2020

arrow_upward
6
arrow_downward

Saya juga tidak diperbolehkan menggunakan pointer-events:none, karena ini adalah link. Saya terinspirasi oleh jawaban user1271033. Contohnya tidak berfungsi untuk saya, tetapi menambahkan div kosong sebelum teks di dalam div terpotong berfungsi untuk saya.

Contoh:

    <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

Bagaimana dengan ini http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html ? Mungkin itu cocok untukmu. Contoh:

<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

Anda dapat menonaktifkan tooltip di Safari dengan mengatur pointer-events: none; di CSS. Namun berhati-hatilah, ini menonaktifkan semua peristiwa penunjuk, jadi jika itu adalah tautan, maka tautan tersebut juga akan dinonaktifkan.

person stinogle    schedule 17.07.2014

arrow_upward
-1
arrow_downward

Tambahkan css di kode Anda

 pointer-events: none;

Bahkan Anda dapat membuat css baru untuk itu dan menerapkannya dimanapun diperlukan.

Anda dapat melakukannya dengan cara ini:

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

Coba lihat

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

person Pooja-G    schedule 02.01.2017
comment
terima kasih sudah menggali, sayangnya ini tautan, jadi perlu dilihat oleh kursor dan sudah diajukan oleh jawaban lain - person Vincent Duprez; 02.01.2017
comment
@VincentDuprez Saya menggunakan ini dari span dan itu berfungsi dengan baik untuk saya. Saya pikir, Anda harus mencobanya setidaknya sekali. - person Pooja-G; 02.01.2017
comment
Saya menjalankan kode Anda jsfiddle di browser safari dan itu berfungsi di pihak saya. - person Pooja-G; 03.01.2017
comment
Saya berbicara tentang tautannya, tautannya tidak berfungsi lagi - person Vincent Duprez; 03.01.2017