背景色・文字色を設定できるツールチップ「Form Tooltip」
当ページのリンクには広告が含まれています。
スポンサーリンク
背景色・文字色を設定できるツールチップを実装するプラグイン「Form Tooltip」を紹介します。
jQueryプラグイン「Form Tooltip」
- 背景色
- 文字色
- ツールチップの位置
- 文字サイズ
- パディング
- ボックスの角丸の半径
スポンサーリンク
それではデモページのフォームをクリックしてみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Form Tooltip のデモでーす。">
<title>jQueryプラグイン - Form Tooltip</title>
</head>
<body>
<h1>Form Tooltip のデモでーす。</h1>
<form id="demo">
<input type="text" value="クリック！クリック！" name="text"/>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.formtooltip.js"></script>
<script>
$(document).ready(function(){
var fields = {
text : {
tooltip: "ツールチップ！です！",
position: 'right',
backgroundColor: "#FF00FF",
color: '#FFFF00',
fontSize: 30,
padding: 20,
borderRadius: 5
}
};
$("#demo").formtoolip(fields, {});
});
</script>
</body>
</html>
スポンサーリンク