今日の人気記事

  1. 画像スライドショー「jCarousel」オプションたくさんアルヨ
  2. select要素の複数選択フォームを実装「Multiple Select」
  3. テーブルにページャーを「PaginateMyTable」
  4. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  5. 左右にスクロールできるタブメニュー「ScrollTabs」

さまざまな要素をツールチップで表示「DarkTooltip」

スポンサーリンク

さまざまな要素をツールチップで表示するプラグイン「DarkTooltip」を紹介します。

jQueryプラグイン「DarkTooltip」

ツールチップのプラグインはいろいろありますが、このプラグインの特徴はツールチップとして、要素を指定できることです。

また、ツールチップを表示する位置やアニメーションを指定することもできるので、おすすめ!

スポンサーリンク

デモのツールチップをご覧ください。

「DarkTooltip」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="DarkTooltipのデモでーす。">
<title>DarkTooltip - jQueryプラグイン</title>
<link rel="stylesheet" href="darktooltip.css">
<style>
.box{
  float: left;
  padding: 10px;
  background-color: #eee;
  width:100px;
  margin:50px 100px;
  text-align:center;
}
</style>
</head>
<body id="home">
<h1>DarkTooltipのデモでーす。</h1>

<div id="def" class="box" data-tooltip="ツールチップ" >デモ</div>

<div id="def-html" class="box" data-tooltip="#html-content">デモ</div>
<div id ="html-content" style="display:none;">
  <h2>画像のツールチップ!</h2>
  <img src="image.png">
</div>

</body>
</html>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.darktooltip.js"></script>
<script>
$(document).ready( function(){
  $('#def').darkTooltip();
  $('#def-html').darkTooltip({
    opacity:1,
    gravity:'west'
  });
});
</script>	

</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» DarkTooltip

スポンサーリンク

関連記事(一部広告含む)