DojoのTooltip - 平松祥史の日記

DojoのTooltipは独立したウィジェットとして実装されている。

dojoType="dijit.Tooltip" を指定した要素がツールチップとして表示され、中身のテキストはHTMLのfontタグなどやCSSを使った装飾ができる。
どこにマウスポインタが入ったらツールチップを表示するのかはconnectId属性にDOMのidを指定する。

<html>
<head>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
    dojo.require("dijit.Tooltip");
    dojo.require("dojo.parser");
</script>
<style type="text/css">
@import "dijit/themes/tundra/tundra.css";
@import "dojo/resources/dojo.css";

#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 class="tundra">
<div id="div1">
    <span id="test_Text"> Tooltip テスト </span>
    <span dojoType="dijit.Tooltip" connectId="test_Text">
        <span style="color: red;font-size:large;font-weight:border">HTMLでTooltip</span><br>
        <span style="color: blue;font-size:small">2行目</span>
    </span>
</div>
</body>
</html>