JavaScript DHTML/Ext JS/Tooltip — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

1 Add tooltip to tab
2 Ajax tooltip
3 Anchor right tooltip
4 Auto hide tooltip
5 Basic tooltip
6 Callout tooltip
7 Closable tooltip
8 CSS customized tooltip
9 Mouse track tooltip
10 Set message target to use tooltip
11 Slider with custom tooltip
12 Slider with tooltip

Add tooltip to tab

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    new Ext.Viewport({
        layout : "fit",
        title  : "Exercising scrollable tabs",
        items  : {
            xtype           : "tabpanel",
            activeTab       : 0,
            id              : "myTPanel",
            enableTabScroll : true,
            resizeTabs      : true,
            minTabWidth     : 75,
            items           : [
                {
                    title : "our first tab",
                    tabTip   : "asdf"
                }
            ]
        }
    });
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Ajax tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

Anchor right tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

Auto hide tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

Basic tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

Callout tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

Closable tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

CSS customized tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
    <script type="text/javascript">
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.Slider({
        renderTo: "basic-slider",
        width: 214,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "increment-slider",
        width: 214,
        value:50,
        increment: 10,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "vertical-slider",
        height: 214,
        vertical: true,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "tip-slider",
        width: 214,
        minValue: 0,
        maxValue: 100,
        plugins: new Ext.ux.SliderTip()
    });
    var tip = new Ext.ux.SliderTip({
        getText: function(slider){
            return String.format("<b>{0}% complete</b>", slider.getValue());
        }
    });
    new Ext.Slider({
        renderTo: "custom-tip-slider",
        width: 214,
        increment: 10,
        minValue: 0,
        maxValue: 100,
        plugins: tip
    });
    new Ext.Slider({
        renderTo: "custom-slider",
        width: 214,
        increment: 10,
        minValue: 0,
        maxValue: 100,
        plugins: new Ext.ux.SliderTip()
    });
});
    </script>
</head>
<body>
<!-- EXAMPLES -->
<h1>Ext Slider Example</h1>
<p>Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.</p>
<h3>Basic Slider</h3>
<div id="basic-slider"></div>
<br/>
<h3>Snapping Slider</h3>
<div id="increment-slider"></div>
<br/>
<h3>Vertical Slider</h3>
<div id="vertical-slider"></div>
<br/>
<h3>Slider with tip</h3>
<div id="tip-slider"></div>
<br/>
<h3>Slider with custom tip</h3>
<div id="custom-tip-slider"></div>
<br/>
<h3>CSS Customized Slider</h3>
<div id="custom-slider"></div>
<!-- extra space for scrolling -->
<div style="height:150px;"></div>
</body>
</html>

Mouse track tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" >
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.ToolTip({
        target: "tip1",
        html: "A very simple tooltip"
    });
    new Ext.ToolTip({
        target: "ajax-tip",
        width: 200,
        autoLoad: {url: "ajax-tip.html"},
        dismissDelay: 15000 // auto hide after 15 seconds
    });
    new Ext.ToolTip({
        target: "tip2",
        html: "Click the X to close me",
        title: "My Tip Title",
        autoHide: false,
        closable: true,
        draggable:true
    });
    new Ext.ToolTip({
        target: "track-tip",
        title: "Mouse Track",
        width:200,
        html: "This tip will follow the mouse while it is over the element",
        trackMouse:true
    });
    
    new Ext.ToolTip({        
        title: "<a href="#">Rich Content Tooltip</a>",
        id: "content-anchor-tip",
        target: "leftCallout",
        anchor: "left",
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: "content-tip", // load content from the page
        listeners: {
            "render": function(){
                this.header.on("click", function(e){
                    e.stopEvent();
                    Ext.Msg.alert("Link", "Link to something interesting.");
                    Ext.getCmp("content-anchor-tip").hide();
                }, this, {delegate:"a"});
            }
        }
    });
    
    new Ext.ToolTip({
        target: "bottomCallout",
        anchor: "top",
        anchorOffset: 85, // center the anchor on the tooltip
        html: "This tip\"s anchor is centered"
    });
    
    new Ext.ToolTip({
        target: "trackCallout",
        anchor: "right",
        trackMouse: true,
        html: "Tracking while you move the mouse"
    });

    Ext.QuickTips.init();
});
    </script>
    <style type="text/css">
        .tip-target {
            width: 100px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#dfe8f6;
            color: #15428b;
            cursor:default;
            margin:10px;
            font:bold 11px tahoma,arial,sans-serif;
            float:left;
        }
    </style>
</head>
<body>
    <h1>Tips examples</h1>

    <h3>Easiest Tip</h3>
    <div id="tip1" class="tip-target">Basic ToolTip</div>
    <div id="tip2" class="tip-target">autoHide disabled</div>
    <div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
    <div id="track-tip" class="tip-target">Mouse Track</div>
    <div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>
    
    <div class="x-clear"></div>
    <h3>Callout Tip</h3>
    <div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
    <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
    <div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>
    <div style="display:none;">
        <div id="content-tip">
            <ul>
                <li>5 bedrooms</li>
                <li>2 bathrooms</li>
                <li>Large backyard</li>
                <li>Close to transport</li>
            </ul>
            <div class="x-clear"></div>
            <img src="images/house.jpg" alt="Website Thumbnail" />
        </div>
    </div>
</body>
</html>

Set message target to use tooltip

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
Ext.QuickTips.init();
var formPanelItems =[
   {
      fieldLabel    : "Special Chars Only",
      allowBlank    : false,
      msgTarget : "qtip",
      stripCharsRe  : /[a-zA-Z0-9]/ig
   }
];
var fp = new Ext.form.FormPanel({
   renderTo     : Ext.getBody(),
   width        : 400,
   title        : "Title here",
   height       : 170,
   frame        : true,
   bodyStyle    : "padding: 5px",
   monitorValid : true,
   monitorPoll  : 50, 
   labelWidth   : 125,   
   defaultType  : "textfield",
   defaults     : {
      msgTarget : "side",
      anchor    : "-20"
   },
   items        : formPanelItems,
});

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Slider with custom tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
    <script type="text/javascript">
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.Slider({
        renderTo: "basic-slider",
        width: 214,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "increment-slider",
        width: 214,
        value:50,
        increment: 10,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "vertical-slider",
        height: 214,
        vertical: true,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "tip-slider",
        width: 214,
        minValue: 0,
        maxValue: 100,
        plugins: new Ext.ux.SliderTip()
    });
    var tip = new Ext.ux.SliderTip({
        getText: function(slider){
            return String.format("<b>{0}% complete</b>", slider.getValue());
        }
    });
    new Ext.Slider({
        renderTo: "custom-tip-slider",
        width: 214,
        increment: 10,
        minValue: 0,
        maxValue: 100,
        plugins: tip
    });
    new Ext.Slider({
        renderTo: "custom-slider",
        width: 214,
        increment: 10,
        minValue: 0,
        maxValue: 100,
        plugins: new Ext.ux.SliderTip()
    });
});
    </script>
</head>
<body>
<!-- EXAMPLES -->
<h1>Ext Slider Example</h1>
<p>Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.</p>
<h3>Basic Slider</h3>
<div id="basic-slider"></div>
<br/>
<h3>Snapping Slider</h3>
<div id="increment-slider"></div>
<br/>
<h3>Vertical Slider</h3>
<div id="vertical-slider"></div>
<br/>
<h3>Slider with tip</h3>
<div id="tip-slider"></div>
<br/>
<h3>Slider with custom tip</h3>
<div id="custom-tip-slider"></div>
<br/>
<h3>CSS Customized Slider</h3>
<div id="custom-slider"></div>
<!-- extra space for scrolling -->
<div style="height:150px;"></div>
</body>
</html>

Slider with tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
    <script type="text/javascript">
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    new Ext.Slider({
        renderTo: "basic-slider",
        width: 214,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "increment-slider",
        width: 214,
        value:50,
        increment: 10,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "vertical-slider",
        height: 214,
        vertical: true,
        minValue: 0,
        maxValue: 100
    });
    new Ext.Slider({
        renderTo: "tip-slider",
        width: 214,
        minValue: 0,
        maxValue: 100,
        plugins: new Ext.ux.SliderTip()
    });
    var tip = new Ext.ux.SliderTip({
        getText: function(slider){
            return String.format("<b>{0}% complete</b>", slider.getValue());
        }
    });
    new Ext.Slider({
        renderTo: "custom-tip-slider",
        width: 214,
        increment: 10,
        minValue: 0,
        maxValue: 100,
        plugins: tip
    });
    new Ext.Slider({
        renderTo: "custom-slider",
        width: 214,
        increment: 10,
        minValue: 0,
        maxValue: 100,
        plugins: new Ext.ux.SliderTip()
    });
});
    </script>
</head>
<body>
<!-- EXAMPLES -->
<h1>Ext Slider Example</h1>
<p>Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.</p>
<h3>Basic Slider</h3>
<div id="basic-slider"></div>
<br/>
<h3>Snapping Slider</h3>
<div id="increment-slider"></div>
<br/>
<h3>Vertical Slider</h3>
<div id="vertical-slider"></div>
<br/>
<h3>Slider with tip</h3>
<div id="tip-slider"></div>
<br/>
<h3>Slider with custom tip</h3>
<div id="custom-tip-slider"></div>
<br/>
<h3>CSS Customized Slider</h3>
<div id="custom-slider"></div>
<!-- extra space for scrolling -->
<div style="height:150px;"></div>
</body>
</html>

JavaScript DHTML/Ext JS/Tooltip — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

Add tooltip to tab

Ajax tooltip

Anchor right tooltip

Auto hide tooltip

Basic tooltip

Callout tooltip

Closable tooltip

CSS customized tooltip

Mouse track tooltip

Set message target to use tooltip

Slider with custom tooltip

Slider with tooltip

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)