dijit之Tooltip

最新推荐文章于 2016-08-07 16:44:23 发布

转载最新推荐文章于 2016-08-07 16:44:23 发布 · 458 阅读

文章标签：

#dijit #dojo

dojo学习专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何使用 Dojo 框架中的 Tooltip 组件，包括配置主题样式表、加载 JavaScript 类、设置基本属性和使用方法等内容。通过编程式及声明式示例展示了 Tooltip 的灵活运用。

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: '&lt;div class="myTipType"&gt;This is the content of my Tooltip!&lt;/div&gt;',
    // 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>