Wenk를 사용하여 순수한 CSS로 축소 된 툴팁 만들기

이상한 이름으로, 당신은 그다지 기대하지 않을 것입니다. 웬크, 무료 CSS 툴팁 라이브러리. 아직 가장 작은 도서관 중 하나 gzip으로 압축하면 1KB 미만으로 측정 할 수 있습니다..

웬크는 순수 CSS와 데이터-* 속성들 만들다 라이브 툴팁 당신은 당신의 취향에 맞추고 자세를 취할 수 있습니다. 무엇보다 GitHub에서 사용할 수있는 소스 코드가있는 완전히 무료 라이브러리입니다..

이 간단한 툴팁은 웹 사이트에 추가하기가 매우 쉽습니다. 너는 단지 Wenk.css 파일 귀하의 페이지 헤더에 추가, GitHub 레포에서 다운로드 할 수 있습니다..

아니면 CDN 파일을 추가하십시오. GitHub의 CDN에서 호스팅됩니다. 그 코드는 다음과 같습니다.

또는 npm / bower 팬인 경우이 패키지를 설치할 수 있습니다. 터미널에서.

기본 툴팁 태그에는 많은 맞춤 데이터가 없습니다. 그들은 당신을 위치와 너비를 선택하십시오., 하지만 너는해야 해. 수동으로 CSS를 변경하십시오. 다르게 스타일을 지정하려는 경우.

예를 들어 툴팁 요소 위에 나타나는 툴팁에 CSS 화살표를 추가 할 수 있습니다. 이것은 매우 간단하지만 Wenk 스타일 시트를 훑어 봐야합니다. 정확한 CSS 클래스 찾기 연장하다.

여기에 몇 가지 샘플이있다. 기본 코드 Wenk 툴팁 용 :

   오른쪽으로 웬크!  

주요 Wenk 방문 페이지에는 다음이 포함됩니다. 라이브 데모 당신이 공중 선회에 의해 시험 할 수있는. 이것들은 가장 기본적인 툴팁 당신은 얻을 것이지만 그들은 킬로바이트 미만의 도서관에 딱 맞습니다..

고려해야 할 주요 사항은 다음과 같습니다. 브라우저 지원. Chrome 및 Firefox의 모든 버전 잘 작동해야합니다.. Opera 12+ 및 Opera Mini v8 +와 동일합니다. 하지만 IE8과 IE10은 문제가 생겼다 이 툴팁을 렌더링합니다. 고맙게도 시장 점유율은 빠르게 떨어지고 있지만 사용하기 전에 고려해야 할 사항입니다..

나는 소수의 KB들로 얼마나 많은 일을 할 수 있는지 아직도 놀랍다. 웬크 (Wenk) 도서관은 현대 프론트 엔드 개발에 대한 증거이며, 조금씩 길게 갈 수 있음을 보여줍니다.

당신은 전체 출처 GitHub에서 라이브 데모 과 코드 스 니펫 자신의 사이트에 대한 툴팁을 설정하고 작성하는 방법.