jQueryプラグインのtooltipsterの使い方
jQueryプラグインのtooltipsterの使い方です。
こちらよりダウンロードします。
jsファイルは一つですが、cssファイルがかなりあります。
まず全てプリロードします。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="../js/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/tooltipster.css" />引数には空オブジェクトを指定し、セレクタにtooltipsterメソッドを実行します。
<script type="text/javascript">
$(function() {
$('.aaa').tooltipster({});
});
</script>title属性で指定した文言が吹き出しとして表示されます。
<body>
<span class="aaa" title="吹き出し">マウスオーバー</span>
</body>空のオブジェクトに色々指定することで吹き出しの表示方法を変更することができます。
arrow:falseとすることにより、吹き出しの矢印を非表示にします。
position:rightとすることにより、吹き出しを右側に表示します。その他、left,top,bottom等も指定できます。(シングルクォーテーションで囲む必要があります)
<script type="text/javascript">
$(function() {
$('.aaa').tooltipster({
arrow:false,
position:'right'
});
});
</script>今まではマウスオーバーによってtitle属性で指定した文言が吹き出しが表示されました。
これをtrigger:’none’とすることによってマウスオーバーによる吹き出しを解除することができます。
content:~~~とすることによって~~~が表示されるようにできます。
セレクタ.tooltipster('show');とすることによって表示することができるようになります。
試しにテキストボックスが3文字以下なら吹き出しを表示するようにします。
<script type="text/javascript">
$(function() {
$('#a').tooltipster({
arrow:false,
position:'right',
trigger:'none',
content:'吹き出し！'
});
$('#a').focusout(function(){
if($('#a').val().length <= 3) {
$('#a').tooltipster('show');
} else {
$('#a').tooltipster('hide');
}
});
});
</script>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント