The setup for using dijit/Tooltip
is the same as using any Dijit widget: add the desired theme stylesheet to the page, add the name of the theme as a CSS class to the body node, and require the widget's JavaScript class:
<script>
// Load the Tooltip widget class
require(["dijit/Tooltip", "dojo/parser", "dojo/domReady!"], function(Tooltip, parser){
parser.parse();
});
</script>
With the theme and widget class loaded, a basic example of programmatic
dijit/Tooltip
usage would look like:
// Create a new Tooltip
var tip = new Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
Important dijit/Tooltip
properties include:
- connectId - An array of IDs or DOM nodes that the Tooltip should be connected to
- label - The HTML or text content to be placed within the Tooltip
- showDelay - The show delay of the Tooltip
Notable dijit/Tooltip
methods include:
- addTarget - Adds a Tooltip target if not already connected
- close - Closes a Tooltip instance (hides its visibility)
- open - Opens a Tooltip instance (makes the Tooltip visible)
- removeTarget - Removes a node from the Tooltip target list
- set - Allows for changing of properties, most notably Tooltip content (
myTip.set("label","New content!")
)
The dijit/Tooltip
object also hosts a configurable defaultPosition
array which contains the desired order which a Tooltip instance should try to display:
Tooltip.defaultPosition = ["above", "below", "after-centered", "before-centered"];
声明式Tooltip例1:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Declarative Tooltip</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
.div1Style {
width : 300px;
height : 600px;
margin : 200px;
}
.div2Style {
margin-top : 50px;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require(["dijit/Tooltip", "dojo/parser", "dojo/domReady!"], function(Tooltip, parser){
parser.parse();
});
</script>
</head>
<body class="claro">
<div class="div1Style">
<div class="div2Style">
<button id="TooltipButton3" οnmοuseοver="dijit.Tooltip.defaultPosition=['after','before']">Tooltip After</button><br/>
<div class="dijitHidden"><span data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'TooltipButton3'">
I am <strong>after</strong> the button</span>
</div>
</div>
<div class="div2Style">
<button id="TooltipButton" οnmοuseοver="dijit.Tooltip.defaultPosition=['above', 'below']">Tooltip Above</button><br/>
<div class="dijitHidden"><span data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'TooltipButton'">
I am <strong>above</strong> the button</span>
</div>
</div>
<div class="div2Style">
<button id="TooltipButton2" οnmοuseοver="dijit.Tooltip.defaultPosition=['below','above']">Tooltip Below</button><br/>
<div class="dijitHidden"><span data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'TooltipButton2'">
I am <strong>below</strong> the button</span>
</div>
</div>
<div class="div2Style">
<button id="TooltipButton4" οnmοuseοver="dijit.Tooltip.defaultPosition=['before','after']">Tooltip Before</button><br/>
<div class="dijitHidden"><span data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'TooltipButton4'">
I am <strong>before</strong> the button</span>
</div>
</div>
</div>
</body>
</html>
声明式Tooltip例2:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Decalrative Tooltip </title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require(["dijit/Tooltip", "dojo/parser", "dojo/domReady!"], function(Tooltip, parser){
parser.parse();
/*new Tooltip({
connectId: ["nameTip"],
label: "<img src='rod-stewart.jpg' alt='Rod Stewart' width='300' height='404' />"
});
// Add Tooltip of North London
new Tooltip({
connectId: ["londonTip"],
label: "<img src='emirates-stadium.jpg' alt='The Emirates in London' width='400' height='267' />"
});
//Add Tooltip of record
new Tooltip({
connectId: ["recordsTip"],
label: "<img src='every-picture.jpg' alt='Every Picture Tells a Story' width='200' height='197' />"
});
// Add custom Tooltip
var myTip = new Tooltip({
connectId: ["hoverLink"],
label: "Don't I look funky?",
"class": "customTip"
}); */
});
</script>
</head>
<body class="claro">
<ul>
<li><a href="http://www.imdb.com/title/tt0112573/" id="movieBraveheart">Braveheart</a></li>
<li><a href="http://www.imdb.com/title/tt0237534/" id="movieBrotherhood">Brotherhood of the Wolf</a></li>
<li><a href="http://www.imdb.com/title/tt0245844/" id="movieCristo">The Count of Monte Cristo</a></li>
</ul>
<div class="dijitHidden">
<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'movieBraveheart'">
<img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="image/braveheart.jpg" />
<p style="width:400px;"><strong>Braveheart</strong><br />Braveheart is the partly historical, partly mythological, story of William Wallace, a Scottish common man who fights for his country's freedom from English rule around the end of the 13th century...</p>
<br style="clear:both;">
</div>
</div>
<div class="dijitHidden">
<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'movieBrotherhood'">
<img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="image/brotherhood.jpg" />
<p style="width:400px;"><strong>Brotherhood of the Wolf</strong><br />In 1765 something was stalking the mountains of central France. A 'beast' that pounced on humans and animals with terrible ferocity...</p>
<br style="clear:both;">
</div>
</div>
<div class="dijitHidden">
<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'movieCristo'">
<img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="image/count.jpg" />
<p style="width:400px;"><strong>The Count of Monte Cristo</strong><br />'The Count of Monte Cristo' is a remake of the Alexander Dumas tale by the same name. Dantes, a sailor who is falsely accused of treason by his best friend Fernand, who wants Dantes' girlfriend Mercedes for himself...</p>
<br style="clear:both;">
</div>
</div>
</body>
</html>
编程式Tooltip例子:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Programmatic Tooltip </title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
.div1Style {
width : 300px;
height : 600px;
margin : 200px;
}
.div2Style {
margin-top : 50px;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require(["dijit/Tooltip", "dojo/parser", "dojo/domReady!"], function(Tooltip, parser){
parser.parse();
new Tooltip({
connectId: ["nameTip"],
label: "<img src='image/braveheart.jpg' alt='Rod Stewart' width='50px' height='50px' />"
});
// Add Tooltip of North London
new Tooltip({
connectId: ["londonTip"],
label: "<img src='image/braveheart.jpg' alt='The Emirates in London' width='50px' height='50px' />"
});
//Add Tooltip of record
new Tooltip({
connectId: ["recordsTip"],
label: "<img src='image/braveheart.jpg' alt='Every Picture Tells a Story' width='50px' height='50px' />"
});
// Add custom Tooltip
var myTip = new Tooltip({
connectId: ["hoverLink"],
label: "Don't I look funky?",
"class": "customTip"
});
});
</script>
</head>
<body class="claro">
<ul>
<li><a href="http://www.imdb.com/title/tt0112573/" id="nameTip">Name</a></li>
<li><a href="http://www.imdb.com/title/tt0237534/" id="londonTip">London</a></li>
<li><a href="http://www.imdb.com/title/tt0245844/" id="recordsTip">Record</a></li>
<li><a href="http://www.imdb.com/title/tt0245844/" id="hoverLink">hoverLink</a></li>
</ul>
</body>
</html>