HTML이 무료로 툴팁을 제공하는 방법!

내용물


  • Intro
  • Title
  • Example
  • Summary

  • 소개

    Tooltips! Aargh, I still don't know how I feel about them.
    I understand they are useful, but part of me feels like there must be a better way to get that information across.

    Nevertheless, we're probably going to have to implement them at some point, so let's dive in.

    제목

    You can achieve a tooltip on any HTML element very simply by setting the attribute title .
    That's it! No NPM installs, no tricks!
    The rest is browser magic.

    <span title="Yay, a tooltip!">ℹ️</span>
    

    스타일링



    이 문제를 해결해 보겠습니다. 제목 속성이 표시되는 방식에 스타일을 지정할 수는 없으며 브라우저에 달려 있습니다.

    그러나 툴팁을 스타일링하는 것은 필수입니다. 툴팁을 사용하지 않고 다른 방식으로 정보를 얻는 것이 가장 좋을 것 같습니다.

    예시

    Shut up and show me the code.
    10 Internet points to those who get the movie reference in the tooltip!

    요약

    In summary, you can use what browsers give you to create a tooltip.
    It will be accessible for all users as its semantic HTML.
    There will be nothing faster as it is a HTML attribute.

    Happy building!

    What are your thoughts on tooltips? Love them or hate?

    좋은 웹페이지 즐겨찾기