画面項目をリサイズする時にTooltipをリアルタイムで表示する方法を検証しました。
完成後のイメージ
実装
１．HTMLで画面項目を用意します。
<div id="demoDIV" style="width:200px; height:100px">
<p>DEMO</p>
</div>
２．上記のDIVに対して、Tooltipを定義します。
$("#demoDIV").tooltip({
items: $("#demoDIV"),
track: true,
content: updateTooltipContent,
show: { effect:"none", delay:0},
hide: { when: 'mouseout' }
});
３．DIVのリサイズを可能にし、リサイジング際にTooltipをリアルタイムで表示させます。
$("#demoDIV").resizable({
resize: function (event, ui) {
$("#demoDIV").tooltip("option", "content", updateTooltipContent);
}
});
４，Tooltipに表示する内容と定義します。
function updateTooltipContent() {
return $("#demoDIV").css("width")+ "〜" +$("#demoDIV").css("height");
}
ソースコード
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8" />
<title>DEMO</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<style type="text/css">
body {
padding:0px;
font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#777;
font-weight:300;
}
div {
background-color: #F4F9EE;
}
</style>
<script>
$(function(){
$("#demoDIV").tooltip({
items: $("#demoDIV"),
track: true,
content: updateTooltipContent,
show: { effect:"none", delay:0},
hide: { when: 'mouseout' }
});
$("#demoDIV").resizable({
resize: function (event, ui) {
$("#demoDIV").tooltip("option", "content", updateTooltipContent);
}
});
function updateTooltipContent() {
return $("#demoDIV").css("width")+ "〜" +$("#demoDIV").css("height");
}
})
</script>
</head>
<body>
<div id="demoDIV" style="width:200px; height:100px">
<p>DEMO</p>
</div>
</body>
</HTML>