PopOver

PopOver는 선택적으로 사용자에가 노출시켜주는 ToolTip과 비슷하지만,
타이틀과 함께 다소 내용이 많은 컨텐츠를 노출 하거나 기능적인 요소를 노출 시키고 싶을때 사용됩니다.

TODO

Popover Title

Popover 의 내용을 담을 부분입니다.
마이크로소프트의 차세대 게임 콘솔인 Xbox 720의 문서가 유출됨. 56 페이지에 달하는 이 문서에는 하드웨어 사양과 제품 업데이트에 대한 상세한 내용이 기술.
Preview PopOver Right | Preview PopOver Left | Preview PopOver Top | Preview PopOver Bottom
Options
Name type default description
position string right Target요소 기준으로 left | right | top | bottom 설정이 가능합니다.
title string Popover Title 태그의 속성으로 기입 : data-title="제목입력"
content string Popover Content 태그에 속성으로 기입하는 방법과 내용이 길 경우를 위하여 플러그인 선언시 옵션으로 기입이 가능합니다.

태그의 속성으로 기입 : data-content="내용입력"
플러그인 선언시 옵션으로 기입 :
$('DOM').popover({ content: "내용입력" });
HTML

Popover Title

Popover의 내용을 담을 부분입니다.

Template HTML은 따로 기입하지 않아도 자바스크립트에서 존재 유무를 판단하여 append합니다.

CSS
    .popover { display: none; position: absolute; width: 300px; border: solid 1px #666; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
    .popover .wrap { position: relative; padding: 4px; }
    .popover .title { margin: 0; padding: 0 3px 4px 3px; line-height: 20px; font-size: 12px; }
    .popover article { padding: 8px 3px; line-height: 18px; color: #666; }
    
    .popover .arrow { 
      display: inline-block; position: absolute; top: 42%; right: -10px; width: 10px; height: 20px; 
      background: url(../img/ui/arrow.gif) no-repeat 0 0; 
    }
    .popover.right .arrow { background-position: 0 -22px; left: -10px; }
    .popover.top .arrow,
    .popover.bottom .arrow { width: 20px; height: 10px; left: 20px; right: auto; }
    .popover.top .arrow { background-position: 0 -55px; top: auto; bottom: -10px; }
    .popover.bottom .arrow { background-position: 0 -43px; top: -10px; }
  
Javascript
/** =======================================================
 * RFC PopOver Plugin
 * 
 * @Author Park Jeong Shik (dodortus@gmail.com)
 * @Copyright © 2012 RSUPPORT. CO, LTD. All rights Reserved.
 * 
 * @Required jQuery
 * ======================================================== */

;(function($) {
  $.fn.popover = function(options) {
    console.log('popover', arguments);
    var opts = $.extend({}, $.fn.popover.defaults, options);
    
    // Set Template Mark-up
    if(!$('body > .popover').length) {
      $('body').append([
        '
', '
', '', '
', '

', '
', '
', '
', '
', ].join('\n')); } var $popover = $('body > .popover'); return this.each(function() { var $opener = $(this); $opener.hover(function() { var targetPosition = $(this).offset() , popOverPosition = {}; // Set Content $popover.attr('class', 'popover ' + opts.position); $popover.find('.title').text($opener.data('title') || opts.title); $popover.find('article').text($opener.data('content') || opts.content); // Set Position popOverPosition.top = (targetPosition.top + $opener.height() / 2) - ($popover.outerHeight(true) / 2); switch(opts.position) { case 'right': popOverPosition.left = targetPosition.left + ($opener.outerWidth(true) + 12) break; case 'top': popOverPosition.top = targetPosition.top - ($popover.outerHeight(true) + 12); popOverPosition.left = targetPosition.left; break; case 'bottom': popOverPosition.top = targetPosition.top + ($opener.outerHeight(true) + 12); popOverPosition.left = targetPosition.left; break; default: popOverPosition.left = targetPosition.left - ($popover.outerWidth(true) + 12); } // show popover $popover.css({ 'top': popOverPosition.top, 'left': popOverPosition.left }).show(); }, function() { $popover.hide(); }); }); } // Default Options $.fn.popover.defaults = { position: 'right', title: 'Popover Title', content: 'Popover Content' }; // Use Plugin $('DOM').popover({ position: 'left', content: 'Left 내용입니다. 내용이 길 경우 옵션을 이용해 주세요.' }); })(jQuery);
History