ComponentOne Studio MVC4 Classic ヘルプ
ツールチップの位置の変更

ツールチップの表示位置を変更するには、次のように、position オプションを使用します。

ソースビュー
コードのコピー
<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#tooltiptarget>a").wijtooltip({
                showCallOut: true,
                closeBehavior: 'sticky'
            });
        });
        function applyPosition() {
   $("#tooltiptarget>a").wijtooltip("option", "position", { my: $("#my1").get(0).value + 
   " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value });
        };
    </script>
<div class="main demo">
            <!-- デモマークアップの開始 -->
            <div id="tooltiptarget"  class="ui-helper-reset ui-widget-header ui-corner-all" 
                        style="padding: 1em;">
                <a href="#" title="tooltip">ツールチップ</a>
            </div>
            <!-- デモマークアップの終了 -->
            <div class="demo-options">
                <!-- オプションマークアップの開始 -->
                <div style="height: 70px">
            <div style="width: 180px; float: left;">
            <span style="padding-right: 10px;">my:</span><select id="my1">
            <option value="left">左</option>
            <option value="center">中央</option>
            <option value="right">右</option>
                        </select>
             <select id="my2">
             <option value="top">上</option>
             <option value="center">中央</option>
             <option value="bottom" selected="selected">下</option>
                        </select>
             <br />
             <span style="padding-right: 14px;">at:</span><select id="at1">
             <option value="left">左</option>
             <option value="center">中央</option>
             <option value="right" selected="selected">右</option>
                        </select>
             <select id="at2">
             <option value="top">上</option>
             <option value="center">中央</option>
             <option value="bottom">下</option>
                        </select>
             </div>
             </div>
             <input type="button" onclick="applyPosition();" value="適用" />
             <!-- オプションマークアップの終了 -->
            </div>
        </div>
関連トピック

 

 


Copyright © GrapeCity inc. All rights reserved.