.tooltipMod-obj {
    max-width: 240px;
    padding: 4px 8px;
    line-height: 150%;
    letter-spacing: 0.05em;
    font-size: var(--typo-min);
    border-radius: var(--radius-xs);
    background: #282828;
    color: #fff;
    display: none;
    position: absolute;
    z-index: 1000;
    
  }
  .tooltipMod-obj::after {
    content: "";
    width: 0;
    margin: auto;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    position: absolute;
    left: 0;
    right: 0;
  }
  .tooltipMod-obj.top::after {
    border-top: 6px solid #282828;
    bottom: -6px;
  }
  .tooltipMod-obj.bottom::after {
    border-bottom: 6px solid #282828;
    top: -6px;
  }
  .tooltipMod-obj.right::after {left: auto; right: 6px;}

$bd.on({
    'mouseover': function(){tooltip_disp($(this),$(this).data('tip'));},
    'mouseout': function(){tooltip_remove();}
  }, '[data-tip]');
  $bd.on('click','[data-tip_click]',function(){
    tooltip_disp($(this),$(this).data('tip_click'));
    $rt.addClass('tooltip');
  });
  $bd.on('click','.tooltip',function(){
    tooltip_remove();
    $rt.removeClass('tooltip');
  });
  
  function tooltip_disp(me,obj){
    $bd.append('
' + obj + '
');
    let $tip = $('.tooltipMod-obj');
    let tipHeight = $tip.innerHeight();
    let offsetTop = me.offset().top;
    let offsetLeft = me.offset().left;
  
    let t = '';
    let tb = '';
    let l = '';
    //上部空きスペース確認
    if(offsetTop < tipHeight + 8){
      t = offsetTop + me.innerHeight() + 8;
      tb = 'bottom';
    } else {
      t = offsetTop - (tipHeight + me.innerHeight() - 10);
      tb = 'top';
    }
  
    //左右空きスペース確認
    if(offsetLeft < $tip.innerWidth() / 2) {
      l = 8;
      $bd.append('');
    } else {
      l = offsetLeft - ($tip.innerWidth() / 2) + (me.innerWidth() / 2);
    }
  
    $tip.addClass(tb).css({'top':t + 'px','left':l + 'px'}).fadeIn(200);
  }
  function tooltip_remove(){
    $('.tooltipMod-obj , .tooltipMod-style').remove();
  }