super simple css tooltips

매우 간단한 CSS 툴팁

툴팁 호버를 요소에 쉽게 추가하십시오. 툴팁 호버는 요소의 왼쪽, 오른쪽 또는 하단에 배치 할 수 있습니다. 두 번째 하단 옵션에는 포인터가 포함됩니다.

CSS 클래스

• tooltip--left
• tooltip--right
• tooltip--bottom
• tooltip--triangle

용법

CSS는 tooltip--* 있는 모든 요소를 ​​사용하여 클래스를 클래스하고 요소의 data-tooltip 속성을 사용하여 툴팁 텍스트를 제공합니다.

[ class ^= "tooltip" ] {
  ...
  content : attr ( data-tooltip );
  ...
}

 < img href =" /img/info.svg " class =" tooltip--left " data-tooltip =" This is the text displayed " >

지원하다

Chrome, Firefox, Safari, Edge 및 IE10+의 현재 버전.