ExtのTooltip - 平松祥史の日記

マウスポインタが重なったときにTooltipを表示したいDOM要素のIDを指定する。Tooltipで表示する内容にはHTMLも指定できる。

<html>
<head>
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
    new Ext.ToolTip({
        target: 'test_Text',
        html: '<b><font color="red">Tooltip</font> Test</b>'
    });
});
</script>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<style type="text/css">
div#div1 {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 80px;
    width: 150px;
    border-width: 2px;
    border-style: ridge;
    border-color: black;
    padding: 5px;
    background-color: #FFEEEE;
}
</style>
</head>
<body>
<div id="div1">
    <span id="test_Text"> Tooltip テスト </span>
</div>
</body>
</html>