Material-ui: 툴팁이 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.<iconbutton disabled="disabled"/>

에 λ§Œλ“  2017λ…„ 09μ›” 27일  Β·  15μ½”λ©˜νŠΈ  Β·  좜처: mui-org/material-ui

  • [x]이 μ €μž₯μ†Œμ˜ 문제 λ₯Ό κ²€μƒ‰ν–ˆμœΌλ©° 이것이 쀑볡이 μ•„λ‹ˆλΌκ³  μƒκ°ν•©λ‹ˆλ‹€.

μ˜ˆμƒλ˜λŠ” λ™μž‘

마우슀λ₯Ό 올리면 툴팁이 ν‘œμ‹œλ©λ‹ˆλ‹€.

ν˜„μž¬ 행동

마우슀λ₯Ό 올리면 툴팁이 μˆ¨κ²¨μ§‘λ‹ˆλ‹€.

μž¬ν˜„ 단계 (버그 용)

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

λ‹Ήμ‹ μ˜ ν™˜κ²½

| 기술 | 버전 |
| -------------- | --------- |
| Material-UI | v1.0.0- 베타 .12 |

Tooltip question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λΉ„ν™œμ„±ν™” 된 μš”μ†ŒλŠ” 이벀트λ₯Ό λ°œμƒμ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μš”μ†Œ μœ„μ— DIVλ₯Ό λ°°μΉ˜ν•˜κ³  λŒ€μ‹  ν•΄λ‹Ή μš”μ†Œμ—μ„œ λ°œμƒν•œ 이벀트λ₯Ό μˆ˜μ‹  ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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

이 μ œμ•ˆμ„ κ΅¬ν˜„ν•˜λŠ” 것은 λ‹€μŒκ³Ό κ°™μœΌλ©° μž‘λ™ν•©λ‹ˆλ‹€.

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

λͺ¨λ“  15 λŒ“κΈ€

λΉ„ν™œμ„±ν™” 된 μš”μ†ŒλŠ” 이벀트λ₯Ό λ°œμƒμ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μš”μ†Œ μœ„μ— DIVλ₯Ό λ°°μΉ˜ν•˜κ³  λŒ€μ‹  ν•΄λ‹Ή μš”μ†Œμ—μ„œ λ°œμƒν•œ 이벀트λ₯Ό μˆ˜μ‹  ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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

이 μ œμ•ˆμ„ κ΅¬ν˜„ν•˜λŠ” 것은 λ‹€μŒκ³Ό κ°™μœΌλ©° μž‘λ™ν•©λ‹ˆλ‹€.

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

λ‚˜λŠ” λ˜ν•œ component 속성을 μ‚¬μš©ν•˜λ €κ³  μƒκ°ν–ˆμ§€λ§Œ pointer-events: none; μŠ€νƒ€μΌ λ•Œλ¬Έμ— μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

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

@oliviertassinari μ£„μ†‘ν•©λ‹ˆλ‹€, λͺ°λžμŠ΅λ‹ˆλ‹€. 감사.

@bravecow 더 λ§Žμ€ μ‚¬λžŒλ“€μ΄μ΄ 문제λ₯Ό μ œκΈ°ν•˜λ©΄ κ²½κ³ λ₯Ό μΆ”κ°€ ν•  수 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

κ·Έλž˜μ„œ 이것에 λŒ€ν•œ ν—ˆμš©λ˜λŠ” 해결책은 λ²„νŠΌκ³Ό 툴팁 사이에 divλ₯Ό λ„£λŠ” κ²ƒμž…λ‹ˆκΉŒ? 도ꡬ μ„€λͺ…은 일반적으둜 λΉ„ν™œμ„±ν™” 된 단좔에 κ°€μž₯ μœ μš©ν•˜λ©° 단좔가 λΉ„ν™œμ„±ν™” 된 이유 λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

Tooltip ꡬ성 μš”μ†Œμ— μžμ‹μ΄ λΉ„ν™œμ„±ν™” 된 κ²½μš°μ—λ„ ν‘œμ‹œλœλ‹€λŠ” 것을 λ‚˜νƒ€λ‚΄λŠ” μ†Œν’ˆμ„ μΆ”κ°€ν•˜λ©΄ μ–΄λ–»κ²Œλ©λ‹ˆκΉŒ? 이 μ†”λ£¨μ…˜μ„ λ‚΄λΆ€μ μœΌλ‘œ κ΅¬ν˜„ν•  뿐이지 만 적어도 μ‚¬μš©μžλŠ” 도ꡬ μ„€λͺ…이 λΉ„ν™œμ„±ν™” 된 λ²„νŠΌμ—μ„œ μž‘λ™ν•˜μ§€ μ•ŠλŠ” 이유λ₯Ό κΆκΈˆν•΄ν•˜μ§€ μ•Šμ„ κ²ƒμž…λ‹ˆλ‹€.

툴팁 κ²½κ³ λ₯Ό μ–΄λ–»κ²Œ ν•΄μ œν•©λ‹ˆκΉŒ?

툴팁 κ²½κ³ λ₯Ό μ–΄λ–»κ²Œ ν•΄μ œν•©λ‹ˆκΉŒ?

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

@oliviertassinari DOM을 λ³΅μž‘ν•˜κ²Œν•˜μ§€ μ•Šκ³  툴팁 κ²½κ³ λ₯Ό 끄

μ½˜ν…μΈ κ°€λ‘œλ“œ 될 λ•Œ λΉ„ν™œμ„±ν™”λ˜λŠ” λ²„νŠΌμ˜ μ—¬λŸ¬ 도ꡬ λͺ¨μŒμ΄ μžˆμŠ΅λ‹ˆλ‹€. 각 λ²„νŠΌμ—λŠ” 툴팁이 μžˆμŠ΅λ‹ˆλ‹€. λ¬Έμ„œκ°€λ‘œλ“œλ˜λ©΄ λͺ¨λ‘ ν™œμ„±ν™”λ©λ‹ˆλ‹€. λͺ¨λ“  것을 포μž₯ν•΄μ•Όν•©λ‹ˆλ‹€. 단일. 단좔. span μ—μ„œμ΄ κ²½κ³ λ₯Ό μ–΅μ œν•˜λŠ” 것은 μœ ν•΄ν•©λ‹ˆλ‹€.

@goyney ν•„μš”ν•  λ•Œ μ‘°κ±΄λΆ€λ‘œ 도ꡬ μ„€λͺ…을 λ Œλ”λ§ν•˜λŠ” 것은 μ–΄λ–»μŠ΅λ‹ˆκΉŒ? λ‚΄κ°€ μ΄ν•΄ν•˜λŠ” ν•œ, λ²„νŠΌμ΄ λΉ„ν™œμ„±ν™”λ˜μ—ˆμ„ λ•Œ νˆ΄νŒμ„ ν‘œμ‹œν•˜κ³  싢지 μ•ŠμŠ΅λ‹ˆλ‹€.

항상 νˆ΄νŒμ„ ν‘œμ‹œν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€. suppressWarnings μ†Œν’ˆμ΄λ‚˜ νˆ΄νŒμ—μžˆλŠ” 것은 μ–΄λ–»μŠ΅λ‹ˆκΉŒ?

항상 νˆ΄νŒμ„ ν‘œμ‹œν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€

@goyney λ²„νŠΌμ΄ λΉ„ν™œμ„±ν™”λ˜μ–΄ μžˆμ–΄λ„?

λ„€, μ œκ°€ λ§ν•œ κ²ƒμž…λ‹ˆλ‹€. γ…‹γ…‹

μœ„μ—μ„œ μ–ΈκΈ‰ν–ˆλ“―μ΄ λ²„νŠΌμ΄ λΉ„ν™œμ„±ν™” 된 이유λ₯Ό μ•Œλ €μ£ΌκΈ° μœ„ν•΄ @oliviertassinari λ²„νŠΌμ΄ λΉ„ν™œμ„±ν™”λ˜μ—ˆμ„ λ•Œ μ‚¬μš©μžμ—κ²Œ 툴팁이 μΆ”κ°€λ‘œ μ‚¬μš©λ©λ‹ˆλ‹€.

@ dskoda1 # 11601을 μ—΄μ—ˆμŠ΅λ‹ˆλ‹€.

λΉ„ν™œμ„±ν™” 된 μš”μ†ŒλŠ” 이벀트λ₯Ό λ°œμƒμ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μš”μ†Œ μœ„μ— DIVλ₯Ό λ°°μΉ˜ν•˜κ³  λŒ€μ‹  ν•΄λ‹Ή μš”μ†Œμ—μ„œ λ°œμƒν•œ 이벀트λ₯Ό μˆ˜μ‹  ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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

이 μ œμ•ˆμ„ κ΅¬ν˜„ν•˜λŠ” 것은 λ‹€μŒκ³Ό κ°™μœΌλ©° μž‘λ™ν•©λ‹ˆλ‹€.

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

μ΄λŠ” λΉ„ν™œμ„±ν™” 된 λ²„νŠΌμ— νˆ΄νŒμ„ ν‘œμ‹œν•˜λŠ” 데 λ„μ›€μ΄λ˜μ§€λ§Œ 'div'에 포함 된 λ²„νŠΌμ€ μŠ€νƒ€μΌμ΄ μ†μ‹€λ©λ‹ˆλ‹€. λ‚΄κ°€ μ—¬κΈ°μ„œ 무엇을 λ†“μΉ˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰

κ΄€λ ¨ 문제

FranBran picture FranBran  Β·  3μ½”λ©˜νŠΈ

sys13 picture sys13  Β·  3μ½”λ©˜νŠΈ

rbozan picture rbozan  Β·  3μ½”λ©˜νŠΈ

newoga picture newoga  Β·  3μ½”λ©˜νŠΈ

pola88 picture pola88  Β·  3μ½”λ©˜νŠΈ