qTip2 jQuery_jquery 기반의 정교한 프롬프트 정보 플러그인

$("#demo4").qtip({
content: {
text: "Loading...",
ajax: {
url: "lwmeAtCnblogs.aspx ?name=囧月"
}
}
});

$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
})

$(' 버튼').qtip({
content: "팁 내용입니다(by囧月lwme.cnblogs.com)",
show: {
event: 'click' , // 클릭 시 표시 ...
solo: true, // ...그리고 다른 모든 툴팁을 숨깁니다...
modal: true // ...그리고 모달로 만듭니다
},
hide: false
});

$('button').qtip({
content: "팁 내용입니다(by囧月lwme) .cnblogs.com)",
show : {
ready: true
},
hide: false
});

$.fn.qtip.defaults = {
// 페이지가 로드되면 프롬프트 정보 요소를 생성합니다.
prerender: false,
// 프롬프트 정보에 대한 ID를 설정합니다. 예: myTooltip으로 설정
// ui-tooltip-myTooltip을 통해 이 프롬프트 정보에 액세스할 수 있습니다
id: false,
// 프롬프트가 표시될 때마다 이전 프롬프트를 삭제합니다.
overwrite: true ,
// 요소 속성을 통해 프롬프트 생성
// 예를 들어 a[title], 원래 프롬프트 바꾸기 일부 제목은 oldtitle로 이름이 변경됨
suppress: true,
// 콘텐츠 관련 설정
content: {
// 프롬프트 메시지 내용
// 내용만 설정한 경우 직접 내용을 지정할 수 있습니다: "프롬프트 정보"
// 내용 없음: { 텍스트: { "Prompt information" } }
text: true,
// 프롬프트 정보에 사용되는 요소 속성
attr: 'title',
// ajax 플러그인
ajax: false,
title: {
// 프롬프트 메시지 제목
// 제목만 설정한 경우 제목을 직접 지정할 수 있습니다: "title"
text: false,
// 닫기 버튼 프롬프트 정보
// 예: 버튼: "x", 버튼: "닫기"
// 닫기 버튼을 활성화할 수 있습니다.
버튼: false
}
},
// 위치 관련 설정
position: {
// 프롬프트 정보의 위치
// 예를 들어 프롬프트의 대상 요소(at 속성)의 오른쪽 하단
// 해당 프롬프트 정보의 왼쪽 상단(내 속성)
my: 'top left',
at: 'bottom right',
// 프롬프트의 대상 요소, 기본값은 선택기
target : FALSE,
// 기본적으로 프롬프트 정보가 추가되는 컨테이너
container: FALSE,
// 지정된 대상 내에서 프롬프트 정보가 표시되고 경계를 초과하지 않습니다.
뷰포트: FALSE,
조정: {
// 프롬프트 정보 위치 오프셋
x: 0, y: 0,
마우스: TRUE,
크기 조정: TRUE,
방법 : 'flip Flip'
},
//특수 효과
효과: function(api, pos, viewport) {
$(this).animate(pos, {
기간: 200 ,
queue: FALSE
});
}
},
//표시 프롬프트 관련 설정
show: {
// 이벤트를 트리거하는 대상 요소
// 기본값은 선택기
target: false,
// 이벤트 이름, 기본값은 마우스가 움직일 때
// 클릭으로 변경 가능
이벤트: 'mouseenter',
// 특수 효과
효과: true ,
//표시 시간 지연
지연: 90,
//다른 프롬프트 숨기기
solo: false,
//프롬프트 표시 페이지가 로드된 후
ready: false,
modal: {
// 모달 대화 상자 효과 활성화
on: false,
// 특수 효과
효과: true,
blur: true,
escape: true
}
},
// 프롬프트 숨기기 관련 설정
// 표시
hide: {
target: false 참조 ,
이벤트: 'museleave',
효과: true,
지연: 0,
// true로 설정하면 숨겨지지 않습니다
고정: false,
비활성 : false,
leave: 'window',
distance: false
},
// 스타일 관련
style: {
// 스타일 이름
classes: '' ,
widget: false,
width: false ,
height: false,
// 팁 플러그인, 화살표 관련 설정
tip: {
corner: true,
mimic: false,
너비: 8,
높이: 8,
테두리: true,
오프셋: 0
}
},
// 관련 이벤트 바인딩
이벤트: {
렌더링: null,
이동: null,
표시: null,
hide: null,
toggle: null,
visible: null,
초점: null,
흐림: null
}
}

$.fn.qtip.defaults = {
content: {
text: true,
attr: 'title',
ajax: false,
제목: {
텍스트: false,
버튼: false
}
},
위치: {
my: '왼쪽 상단',
at : '오른쪽 하단',
},
쇼: {
이벤트: 'mouseenter',
solo: false,
ready: false,
modal: false
} ,
hide: {
event: 'mouseleave'
},
style: 'ui-tooltip-default'
}

my = [
'왼쪽 위', '오른쪽 위', '가운데 위',
'왼쪽 아래', '오른쪽 아래', '가운데 아래',
'오른쪽 가운데', '오른쪽 상단', '오른쪽 하단',
'왼쪽 중앙', '왼쪽 상단', '왼쪽 하단', '가운데'
]
at = [
'왼쪽 하단', '오른쪽 하단 ', '하단 중앙',
'왼쪽 상단', '오른쪽 상단', '상단 중앙',
'왼쪽 중앙', '왼쪽 상단', '왼쪽 하단',
'오른쪽 중앙' , '오른쪽 상단', '오른쪽 하단', '가운데'
]

['red', 'blue', 'dark', 'light', 'green' ,'jtools', 'plain' , 'youtube', 'cluetip', 'tipsy', 'tipped']

$("#demo2").qtip({
content: "팁 내용입니다(by囧月) "
, 스타일: {
클래스: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});

$ ('.selector').qtip({
content: {
text: 'Loading...', // 텍스트 로드 중...
ajax: {
url: '/path/ to/file', // JSON 스크립트의 URL
type: 'GET', // POST 또는 GET
data: { id: 3 }, // 요청과 함께 전달할 데이터
dataType : 'json', // JSON을 검색한다고 알려주세요
success: function(data, status) {
//...
}
}
}
} );