まだデータがありません。
さまざまな要素をツールチップで表示「DarkTooltip」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまな要素をツールチップで表示するプラグイン「DarkTooltip」を紹介します。
jQueryプラグイン「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
スポンサーリンク