본문으로 바로가기

Bootstrap popover(팝오버) 커스텀

category Front-End/jQuery 2018. 9. 17. 21:12
반응형

부트스트랩 홈페이지에서 볼 수 있는 예제는 다음과 같다.


var options = {

html : true,

container : 'body',

trigger : EVENT(click, hover 등),

content : function() {

return 'popover로 보여질 내용 HTML';

}

};


$('selector').popover(options);


위처럼하면 selector 요소에 trigger에 이벤트 발생 시 팝오버가 보여진다.


하지만 trigger를 hover지정 시 content에 지정한 function이 2번 실행하는 문제가 발생했다.


구글링 결과 Bootstrap이 popover를 위해 내부적으로 2번 호출되는 메소드가 있어서 그렇다는것도 있고,

hover에 mouseenter, mouseover 등 바인딩되는 이벤트가 많아서 그렇다는 말도 있었다.


아무튼 그래서 다음과 같이 해결했다.


$('selector').on(

mouseenter : function() {

$(this).popover({

/* trigger를 manual로 지정, 다른 옵션은 사용하는 상황에 따라 입력 */

trigger : 'manual'

});

$(this).popover('show');

},

mouseleave : function() {

$(this).popover('destroy');

}

)


반응형

댓글을 달아 주세요