Material-ui: Tooltip tidak berfungsi untuk<iconbutton disabled="disabled"/>

Dibuat pada 27 Sep 2017  ·  15Komentar  ·  Sumber: mui-org/material-ui

  • [x] Saya telah mencari masalah dari repositori ini dan yakin bahwa ini bukan duplikat.

Perilaku yang Diharapkan

Keterangan alat terlihat untuk mengarahkan kursor

Perilaku Saat Ini

Keterangan alat disembunyikan untuk mengarahkan kursor

Langkah-langkah untuk Mereproduksi (untuk bug)

<Tooltip title="Tooltip" placement="bottom">
  <IconButton disabled>
  <Done/>
  </IconButton>
</Tooltip>

Lingkungan Anda

| Teknologi | Versi |
| -------------- | --------- |
| Materi-UI | v1.0.0-beta.12 |

Tooltip question

Komentar yang paling membantu

Elemen yang dinonaktifkan tidak akan mengaktifkan peristiwa. Namun Anda dapat menempatkan DIV di atas elemen dan mendengarkan peristiwa yang diaktifkan pada elemen tersebut.

https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

Menerapkan saran ini terlihat seperti ini, dan berhasil.

        <Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

Semua 15 komentar

Elemen yang dinonaktifkan tidak akan mengaktifkan peristiwa. Namun Anda dapat menempatkan DIV di atas elemen dan mendengarkan peristiwa yang diaktifkan pada elemen tersebut.

https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

Menerapkan saran ini terlihat seperti ini, dan berhasil.

        <Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

Saya juga berpikir untuk menggunakan properti component tetapi tidak berhasil karena gaya pointer-events: none; :

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

@oliviertassinari Maaf, tidak tahu. Terima kasih.

@bravecow Saya rasa kita bisa menambahkan peringatan jika lebih banyak orang mengangkat masalah ini.

Jadi, apakah solusi yang diterima untuk ini adalah menempatkan div antara tombol dan tooltips? Memiliki tooltip biasanya paling membantu pada tombol yang dinonaktifkan, untuk menunjukkan mengapa tombol tersebut dinonaktifkan.

Bagaimana jika kita menambahkan sebuah prop ke komponen Tooltip yang menandakannya untuk muncul bahkan ketika anak tersebut dinonaktifkan? Itu hanya akan menerapkan solusi ini di bawah tenda tetapi setidaknya pengguna tidak akan dibiarkan bertanya-tanya mengapa tooltips tidak berfungsi pada tombol yang dinonaktifkan.

Bagaimana Anda mematikan peringatan tooltip?

Bagaimana Anda mematikan peringatan tooltip?

@goyney https://github.com/mui-org/material-ui/issues/8416#issuecomment -332556082

@oliviertassinari Bagaimana cara mematikan peringatan tooltip tanpa mengacaukan DOM?

Saya memiliki beberapa bilah alat tombol yang dinonaktifkan saat konten dimuat. Setiap tombol memiliki keterangan alat di atasnya. Setelah dokumen dimuat, semuanya aktif. Harus membungkus setiap. tunggal. tombol. di span untuk menekan peringatan ini menjengkelkan.

@ goyney Bagaimana dengan merender Tooltip secara kondisional bila diperlukan? Sejauh yang saya pahami, Anda tidak ingin menampilkan tooltip apa pun saat tombol dinonaktifkan.

Saya selalu ingin menampilkan tooltip. Bagaimana dengan suppressWarnings prop atau sesuatu di tooltip.

Saya selalu ingin menampilkan tooltip

@ goyney Bahkan saat tombol dinonaktifkan?

Ya, itulah yang saya katakan. lol

Seperti yang saya sebutkan di atas, tooltips sangat berguna bagi pengguna ketika tombol @oliviertassinari dinonaktifkan, untuk menunjukkan kepada mereka mengapa tombol dinonaktifkan.

@ dskoda1 Saya telah membuka # 11601.

Elemen yang dinonaktifkan tidak akan mengaktifkan peristiwa. Namun Anda dapat menempatkan DIV di atas elemen dan mendengarkan peristiwa yang diaktifkan pada elemen tersebut.

https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

Menerapkan saran ini terlihat seperti ini, dan berhasil.

        <Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

Ini membantu dalam menampilkan tooltip pada tombol nonaktif tetapi tombol yang diapit dalam 'div' kehilangan gaya untuk saya. Apa yang kulewatkan di sini?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

mb-copart picture mb-copart  ·  3Komentar

chris-hinds picture chris-hinds  ·  3Komentar

ghost picture ghost  ·  3Komentar

sys13 picture sys13  ·  3Komentar

ghost picture ghost  ·  3Komentar