jQuery.imui.imuiTooltip

Constructor

imuiTooltip ( [Object options] ) Static

title属性をツールチップで表示します。
title属性の値はエスケープしません。改行をしたい場合は<br>タグを埋め込んでください。

ツールチップを表示する要素のclass属性に以下のclass名を指定することでも任意の方向に同様のツールチップを表示できます。

imui-tooltip-right : 指定した要素の右側（2020 Summerで追加）
imui-tooltip-left : 指定した要素の左側（2020 Summerで追加）
imui-tooltip-top : 指定した要素の上側
imui-tooltip-bottom : 指定した要素の下側

Parameters

options : Object: Optional; オプション
options.tooltipLocation : String: OptionalDefault: top; ツールチップを表示する位置を指定します
"right"（2020 Summerで追加）,"left"（2020 Summerで追加）,"top","bottom"のいずれかを指定してください
options.maxWidth : String: OptionalDefault: auto; ツールチップの最大横幅をpxで指定します
options.tooltipTitle : String: Optional; ツールチップに表示したい文字列を指定します
指定した文字列はエスケープしません
options.zIndex : String: Optional; ツールチップのz-indexを指定します
options.position : String: OptionalDefault: absolute; ツールチップのpositionを指定します（2020 Summerで追加）

<!-- imuiTooltip を使わず、class属性とtitle属性を指定してでツールチップを利用する例 -->
<button class="imui-button imui-tooltip-bottom" title="title属性の値がツールチップに出力されます">ここをマウスオーバしてください</button>

<!-- imuiTooltipでツールチップを利用する例 -->
<button id="sampleId" class="imui-button" >ここをマウスオーバしてください</button>
<script type="text/javascript">
 $('#sampleId').imuiTooltip({
   tooltipLocation:'bottom',
   maxWidth:'150px',
   tooltipTitle:'tooltipTitle オプションの値が表示されます'
 });
</script>

<!-- z-index を指定する例 -->
<textarea id="sampleId" title="z-index の確認（option の zIndex を指定）" >ここをマウスオーバしてください</textarea>
<script type="text/javascript">
  $('#sampleId').imuiTooltip({zIndex:1001});
</script>

<!-- position を指定する例 （2020 Summerで追加） -->
<textarea id="sampleId" title="position の確認（option の position を指定）" style="position:fixed" >ここをマウスオーバしてください</textarea>
<script type="text/javascript">
  $('#sampleId').imuiTooltip({position:'fixed'});
</script>