DAD UNION – WEBエンジニア同盟

世のWEBエンジニアを手助けするテック系サイト

NEW ARTICLE
指定したタグ要素を、指定のHTMLタグ要素で囲む方法【wrapInner】
  1. HOME
  2. jQuery
  3. jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示してくれるJs

jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示してくれるJs

jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示してくれるJs

リンクタグのtitle属性に設定のテキストをマウスオーバー時に吹き出し（ツールチップ）表示します。

目次

1．読込むCSSファイル

 	<link rel="stylesheet" type="text/css" href="tooltipster.css">

2．読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="jquery.tooltipster.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		 $('.tooltip').tooltipster();
	});
</script>

3．HTMLの記述例

<a href="/" class="tooltip" title="「世のお父さんをもっと生きやすく」をテーマに、お父さんの価値をベースアップしていくためのWEB技術メディア">DAD UNION</a>

jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示するデモ

ソース元：Tooltipster – The jQuery Tooltip Plugin

リンク（a）タグのtitle属性のテキストを表示させるだけっていうのが簡単で良いですね。