간편코드 (라이브러리: 부트스트랩, bPopup)

bPopup라이브러리

$("선택자").bPopup({

onOpen: function() {

},

onClose: function() {

$('.modal-content.preview').hide();

$("#modal_ajax").css({transform : "translateX(0)"});

},

escClose: true,

follow: [false, false],

position: ['auto', 'auto'],

easing: 'easeOutBack',

closeClass : 'bt_popClose_a',

speed: 400,

modalClose: true

});

선택자: 팝업 대상(그려지는 아이)

dinbror.dk/blog/bPopup/

 

툴팁

<button id="주체">버튼</button>

<div id="영역(그려지는 아이)" style="border:1px solid;height:50px;">

 

$('주체').tooltip({

animation: true,

// 툴팁을 표시할 컨테이너 설정

container: "#btn_preview",

// 툴팁 표시 틸레이

delay: {show:50, hide:10},

// template 사용한다.

html: true,

// 툴팁 template 내용은 tooltip-inner에 들어간다.

template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner" style="text-align: left;"></div></div>',

// 툴팁 내용.

title: '폰트명, 폰트사이즈, 폰트색상을' + '<br>' + '반드시 설정해주세요.',

// 툴팁 이벤트는 수동.

trigger: 'hover focus',

// viewport: { selector: 'body', padding: 0 },

// 방향

placement: 'bottom'

});

nowonbun.tistory.com/705