이미지에 툴팁 보이지 않게 하는 방법

이미지나 링크, 입력폼 등에 마우스를 오버하면 텍스트로 이뤄진 툴팁이 나타나는 경우가 있습니다.

실제로도 이 툴팁은 여러 용도로 사용자들에게 유용하게 사용됩니다.

이 툴팁을 나타내는 방법은 HTML 엘리먼트의 기본 속성중의 하나인 title="" 속성을 이용하는 것입니다.

<a href="http://naver.com" title="네이버로 이동합니다">네이버</a>

이렇게 코드를 입력하면 네이버라는 링크에 마우스를 오버할때 "네이버로 이동합니다"라는 툴팁이 나타나

사용자에게 더 나은 UX를 제공해줄수 있습니다.

그외에도 title속성은 스크린리더를 사용하는 분들에게도 유용한 역할을 합니다.

그런데 IE는 이 툴팁을 나타내는것이 다른 브라우저와 다른점이 하나 있습니다.

IE는 이미지에 적용된 대체텍스트(alt)의 값도 툴팁으로 보여줍니다.

위의 네이버의 사례에서 네이버 로고에 마우스를 가져다 대면 네이버라고 툴팁이 나타나는데

실제 코드를 보면 다음과 같습니다.

<h1><a href="http://www.naver.com/" onclick="clickcr(this, 'top.logo','78000C01_000000005AA8', '', event)" ><img src="http://wstatic.naver.com/w9/lg_naver_v3.gif" alt="네이버" width="210" height="78" /></a></h1>


title 속성은 사용되지 않았으나 대체텍스트로 alt 속성에 네이버라고 적힌것이 툴팁으로 나타나는 것입니다.

alt속성은 대체텍스트로서 이미지가 로드되지 않았을때 이미지 대신 보여주는 텍스트 입니다.

하지만 이러한 대체텍스트를 IE는 툴팁으로 나타냅니다.

간혹 대체텍스트를 길게 사용하는 경우가 있는데 길게 나타나는 툴팁을 보기 싫어하거나,

이러한 툴팁자체를 싫어하는 클라이언트를 만날때가 있습니다.

이때 툴팁을 나타내지 않게 하기 위해서는 title속성을 활용하면 됩니다.

<img src="naver.gif" alt="네이버" title="" />

라고 마크업하시면

이미지에 마우스를 오버하여도 툴팁이 나타나지 않습니다.

팁이긴 하지만 그래도 alt 속성은 필히 사용해야하고

적절하게 title 속성을 사용해야하는 것은 모두들 알고 계시죠?