JavaScript DHTML/Dojo toolkit/ToolTip

Материал из Web эксперт
Перейти к: навигация, поиск

Add tooltip to tag(span)

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Tooltip");
    </script>
  </head>
  <body class="tundra">
          <span id="targetDiv1" style="cursor:pointer;">
            Hover over to see a tooltip
          </span>
          <div dojoType="dijit.Tooltip"
            connectId="targetDiv1"
            label="label">
          </div>
  </body>
</html>



Add tool tip to text

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Tooltip");
    </script>
  </head>
  <body class="tundra">
     <span id="site1">Text</span>
     <div dojoType="dijit.Tooltip" connectId="site1" label="tooltip">
     </div>
  </body>
</html>



Show and hide tooltip

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Tooltip");
    </script>
  </head>
  <body class="tundra">
        <span id="my" style="cursor:pointer;"
          onMouseOver="dijit.showTooltip("Label", dojo.byId("my"));"
          onMouseOut="dijit.hideTooltip(dojo.byId("my"));"
        >
          Hover me to see the tooltip.
        </span>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/ToolTip&oldid=2099»