'Tooltip'에 해당되는 글 1건

  1. 2007.10.31 Prototip 1.1 (툴팁) Adding more control to your tooltips
사용자 삽입 이미지


Nick Stakenburg 는 Prototype 1.6 에 맞춰 새롭게 재 개발 했네요.
툴팁 열기, 닫기와 토글을 마우스 이벤에 언제든지 사용할 수 있고 열린 툴팁을 유지시키고 새로운 영역에 추가할 수 도 있습니다. 그리고 새로운 방식을 사용되도록 있습니다. 이번 릴리즈에서는 닫기 버튼, 딜레이 등 닫기 기능 링크를 당신이 툴팁 안에 추가할 수있게 되었습니다.
또한 CSS모델로 만들어 져서 툴팁의 스타일 변경이 쉬워졌답니다.

사용법
new Tip(
element, // the id of your element
content, // html
{
className: 'tooltip', // or your own class
closeButton: false // or true
duration: 0.3, // duration of the effect, if used
delay: 0.2 // seconds before tooltip appears
effect: false, // false, 'appear' or 'blind'
fixed: false, // follow the mouse if false
hideOn: 'mouseout' // 'click', 'mousemove', 'mouseover',
{ element: 'element|target|tip|closeButton|.close',
event: 'click|mouseover|mousemove' }
hook: false, // { element: 'topLeft|topRight|bottomLeft|bottomRight|
topMiddle|bottomMiddle|leftMiddle|rightMiddle',
tip: 'topLeft|topRight|bottomLeft|bottomRight|
topMiddle|bottomMiddle|leftMiddle|rightMiddle' }
offset: {x:16, y:16} // or your own, example: {x:30, y:200}
showOn: 'mousemove', // or 'click', 'mouseover', 'mouseout'
target: 'anotherId', // make the tooltip appear on another element
title: false, // or a string, example: 'tip title'
viewport: true // keep within viewport, false when fixed or hooked
}
);

신고
Posted by Rhio.kim