マークアップとスクリプティング

次の HTML マークアップは、いくつかの HTML 要素を使用して wijtooltip ウィジェットの使用方法を示します。

マークアップ	コードのコピー
<!--adds a tooltip to a label--> <label id="tooltip" title="Tooltip Title">Hover here to see the first tooltip.</label> <br /> <!--adds a tooltip to an input--> <input title="Let your users know what to enter in this textbox." type="text" /> <!--adds a tooltip to an input nested in a div--> <div id="targetContainer"> <input title="Let your users know that their password input is hidden." type="password" /> </div>

マークアップ

コードのコピー

<!--adds a tooltip to a label-->
<label id="tooltip" title="Tooltip Title">Hover here to see the first tooltip.</label>
<br />
<!--adds a tooltip to an input-->
<input title="Let your users know what to enter in this textbox." type="text" />

<!--adds a tooltip to an input nested in a div-->
<div id="targetContainer">
    <input title="Let your users know that their password input is hidden." type="password" />
</div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("[title]").wijtooltip({ //delays hiding the tooltip after you mouse out //for four seconds (4,000 milliseconds) hideDelay: 4000 }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
$(document).ready(function () {
    $("[title]").wijtooltip({
        //delays hiding the tooltip after you mouse out
        //for four seconds (4,000 milliseconds)
        hideDelay: 4000
    });
});
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。要素にマウスポインタを合わせると、ツールチップが表示されます。

関連トピック

参照