JavaScript DHTML/Ext JS/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>