Latest web development tutorials

재단 풍선

풍선 쇼 후 요소 위로 마우스를 이동 :

우리는의 모든 요소를 추가 할 수 있습니다 data-tooltip 메시지를 작성하는 속성입니다. 사용 title 텍스트 메시지 팁 설정 속성.

참고 : 슬라이더 자바 스크립트가 필요합니다. 그래서 당신은 한답니다의 JS를 초기화해야합니다 :

<스팬 데이터 툴팁 제목 = " 만세!"> 호버 날 이상! </ SPAN>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

.has-tip 클래스는 마우스 굵은 텍스트를 이동시킬 수있다 :

<스팬 데이터 툴팁 클래스 = " 이 팁을"제목 = "만세!"> 호버 나 이상! </ SPAN>

»시도

풍선 표시 위치

기본적으로 프롬프트 상자 요소의 하단에 표시됩니다.

당신은 사용할 수 있습니다 .tip-top , .tip-left , .tip-right 또는 .tip-bottom 프롬프트 상자 위치를 설정합니다 (기본값).

참고 : 작은 화면 크기에, 풍선 광대역은 100 %입니다.

<스팬 데이터 툴팁 클래스 = " 이 팁 팁 탑을"제목 = "만세!"TOP> </ SPAN>
<스팬 데이터 툴팁 클래스 = " 이 팁 팁 바닥"제목 = "만세!"> 아래 </ SPAN>
<스팬 데이터 툴팁 클래스 = " 이 팁 끝에서 왼쪽으로"제목 = "만세!"> 왼쪽 </ SPAN>
<스팬 데이터 툴팁 클래스 = " 이 팁 팁 오른쪽을"제목 = "만세!"> 오른쪽 </ SPAN>

»시도

라운드 풍선

.radius.round 클래스는 둥근 팁 상자를 설정하는 데 사용됩니다 :

<스팬 데이터 툴팁 클래스 = " 이 팁을"제목 = "만세!"> 기본 </ SPAN>
<스팬 데이터 툴팁 클래스 = " 이 팁 반경을"제목 = "만세!"> 반경 </ SPAN>
<스팬 데이터 툴팁 클래스 = " 이 팁 라운드"제목 = "만세!"> 원형 </ SPAN>

»시도