Ruby on Rails 앱에서 ActiveScaffold를 사용하고 있으며 테이블의 공간을 절약하기 위해 테이블의 기본 "작업"텍스트 (예 : "편집", "삭제", "표시")를 CSS. 또한 action_link.add ("move"및 "copy")와 함께 몇 가지 사용자 지정 작업을 추가했습니다.html로 아이콘에 간단한 툴팁을 표시하려면 어떻게해야합니까?
명확성을 위해 아이콘 위에 마우스를 올려 놓으면 관련 작업 (예 : "편집", "복사")과 함께 툴팁 팝업이 나타나게하고 싶습니다.
태그에 간단한 "alt"정의를 추가하여이 작업을 수행 할 수 있다고 생각했지만 작동하지 않는 것 같습니다.
누군가 올바른 방향으로 나를 가리킬 수 있습니까?
alt 속성은 이미지의 경우, 이미지가 누락 된 경우 또는 텍스트 전용 브라우저에서 사용됩니다.
alt을 툴팁으로 표시 할 때 IE가 잘못되었습니다. 결코 그런 의미가 아니 었습니다.
정확한 속성은 title입니다. 물론 IE에서는 툴팁을 사용하지 않습니다.
따라서 Internet Explorer 및 FireFox/Safari/Chrome/Opera에서 툴팁을 표시하려면 alt 속성과 title 속성을 모두 사용하십시오.
HTML의 툴팁은 이미지 태그의 텍스트 인 alt의 내용이지만 CSS를 사용하여 설정하는 경우 이미지 대신 background:url(...); 스타일이 사용됩니다.
위대한 통찰력 - 예,이 경우, 내가 –
Brent
"title"태그가 필요합니다. 더 이상 필요하지 않은지 확실하지 않지만, 보통 alt 태그와 title 태그를 모두 추가하여 모든 브라우저가 툴팁을 똑같이 표시하는지 확인하십시오.
이미지에는 alt, 링크에는 title을 사용하십시오.
Prestaul이 지적했듯이 alt 태그는 이미지와 링크 제목으로 작동해야합니다. 그러나 이것은 또한 브라우저에 따라 다릅니다. 대부분의 브라우저 은이 메타 데이터를 툴팁으로 표시하지만 반드시 그렇게 할 필요는 없습니다.
img 태그의 alt 속성은 일부 브라우저에서는 작동하지만 일부 브라우저에서는 작동하지 않습니다 (예 : 일부 모질라 기반).
"right way"은 title 속성을 사용하는 것입니다.
사실, Joel Coehoom이 지적한 것처럼, 내 아이콘은 실제로 배경 이미지 였고, 배경 위에 타이틀과 alt 속성이있는 transparent.gif 이미지를 만들었습니다.
이 스레드에 추가 할 단점이 있습니다 ... 대체 태그 또는 제목 태그가 없습니다. alt 속성은 이미지 용이지만 페이지의 다른 모든 요소는 크로스 브라우저 호환성을위한 최상의 선택 인 title 속성을 가질 수 있습니다.
<span title="Click here to edit the foo">
Edit
</span>
YUI 대신 배경 이미지를 사용하고하는 것은 [도구 설명 위젯]을 제공합니다 (HTTP : // 개발자. yahoo.com/yui/container/tooltip/)를 이용하십시오. –
또한 title은 실제로 IE에 툴팁을 표시합니다. – nertzy
실제로 @nertzy로 표시되면 IE는 alt 또는 title 속성을 렌더링하지만 둘 다 제공되면 title 속성을 올바르게 사용합니다. 'title '을 사용하는 것이 좋습니다. – scunliffe