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

TODO

• Input field에서 사용할수 있도록 확장.

Options

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; border-bottom: solid 1px #EBEBEB; }
    .popover article { padding: 8px 3px; line-height: 18px; color: #666; font-size: 12px; }
    .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

• PopOver Mark-up & 플러그인 제작[박정식 | 2012.05.04]