Tooltip

オンマウスでツールチップ表示機能

CSSに関しては一部CSSライブラリを採用しているので併用してください。

  • DEMO
  • 長文テスト
テスト
テスト

使い方

トリガーとなる要素に[data-tip]属性を追加して表示したい内容を入れてください。
通常はトリガー要素のセンター合わせで表示しますが、Windowの端を超える場合は位置を調整して表示します。

  • HTML
  • CSS
  • Script
.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(); }

クリック

クリックで常時表示

[data-tip]属性を[data-tip_click]に変更することでオンマウスではなく、クリックで表示に変更できます。

  • DEMO
テスト