.mod_tooltip-obj {
  max-width: 240px;
  padding: 4px 8px;
  line-height: 150%;
  letter-spacing: .05em;
  font-size: var(--typo-min);
  border-radius: var(--radius-xs);
  background: #282828;
  color: var(--bg-paper);
  display: none;
  position: absolute;
  z-index: 1000;
  
}
.mod_tooltip-obj::after {
  content: '';
  width: 0;
  margin: auto;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  position: absolute;
  left: 0;
  right: 0;
}
.mod_tooltip-obj.top::after {
  border-top: 6px solid #282828;
  bottom: -6px;
}
.mod_tooltip-obj.bottom::after {
  border-bottom: 6px solid #282828;
  top: -6px;
}
.mod_tooltip-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('<div class="mod_tooltip-obj">' + obj + '</div>');
  let $tip = $('.mod_tooltip-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('<style class="mod_tooltip-style">.mod_tooltip-obj::after {left: ' + (offsetLeft + (me.innerWidth() / 2) - 8 - 3) + 'px; right: auto;}</style>');
  } else {
    l = offsetLeft - ($tip.innerWidth() / 2) + (me.innerWidth() / 2);
  }

  $tip.addClass(tb).css({'top':t + 'px','left':l + 'px'}).fadeIn(200);
}
function tooltip_remove(){
  $('.mod_tooltip-obj , .mod_tooltip-style').remove();
}