Mouse track tooltip : Tooltip « Ext JS « JavaScript DHTML






Mouse track tooltip

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/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.com
 * http://www.extjs.com/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>

   
    
  








Related examples in the same category

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