エイチ デザイン / ツールチップ

.tooltipMod {cursor: pointer;}
.tooltipMod.ico-mui::before {content: '\e8fd';}
.tooltipMod-obj {
  max-width: 240px;
  padding: 4px 8px;
  line-height: 150%;
  letter-spacing: 0.05em;
  font-size: 14px;
  border-radius: 4px;
  background: #282828;
  color: #fff;
  display: none;
  position: fixed;
  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(e){
    $bd.append('
' + $(this).data('tip') + '
');
    const $tip = $('.tooltipMod-obj');
    const tipHeight = $tip.innerHeight();
    const offsetTop = $(this).offset().top;
    const offsetLeft = $(this).offset().left;

    //上部空きスペース確認
    if(offsetTop < tipHeight + 8){
      var t = offsetTop + $(this).innerHeight() + 8;
      var tb = 'bottom';
    } else {
      var t = offsetTop - $win.scrollTop() - (tipHeight + $(this).innerHeight() - 10);
      var tb = 'top';
    }

    //左右空きスペース確認
    if(offsetLeft < $tip.innerWidth() / 2) {
      var l = 8;
      $bd.append('');
    } else {
      var l = offsetLeft - ($tip.innerWidth() / 2) + ($(this).innerWidth() / 2);
    }

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