
Prototip은 Prototype/Scriptaculous를 기반하여 만들어진 툴팁 컴포넌트이다. 표준을 따르는 HTML, CSS를 이용한 다양한 레이아웃 디자인과 출력효과를 내장하고 있어 단순히 메시지를 표시하는 것 이상의 표현이 가능하다. 특히, CSS를 이용해 디자인을 손쉽게 커스터마이즈 할 수 있게 한 점과 특정 타겟의 시야를 가리지 않도록 하는 Hooking옵션은 사용자의 입장을 충분히 고려해 만든 모습이 역력하다.
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
}
);
Comments