swat.obsolete/apps/qooxdoo-examples/example/ToolTip_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Test for QxToolTips. Each qx.ui.popup.ToolTip could be assigned to any
  16     instance of qx.ui.core.Widget. You could also use one qx.ui.popup.ToolTip instance
  17     for multiple QxWidgets (to show the same tooltip any multiple items).</p>
  18   </div>
  19
  20   <script type="text/javascript">
  21   qx.core.Init.getInstance().defineMain(function()
  22   {
  23     var d = qx.ui.core.ClientDocument.getInstance();
  24
  25     var c1 = new qx.ui.basic.Atom("Hover me");
  26     with(c1)
  27     {
  28       setTop(48);
  29       setLeft(20);
  30       setBackgroundColor(new qx.renderer.color.Color("#BDD2EF"));
  31       setWidth(100);
  32       setHeight(100);
  33       setTabIndex(1);
  34       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  35     };
  36     d.add(c1);
  37
  38
  39
  40     var c2 = new qx.ui.basic.Atom("Hover me");
  41     with(c2)
  42     {
  43       setTop(48);
  44       setLeft(140);
  45       setBackgroundColor(new qx.renderer.color.Color("#D1DFAD"));
  46       setWidth(100);
  47       setHeight(100);
  48       setTabIndex(1);
  49       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  50     };
  51     d.add(c2);
  52
  53
  54     var c3 = new qx.ui.basic.Atom("Hover me");
  55     with(c3)
  56     {
  57       setTop(48);
  58       setLeft(260);
  59       setBackgroundColor(new qx.renderer.color.Color("#D1A4AD"));
  60       setWidth(100);
  61       setHeight(100);
  62       setTabIndex(1);
  63       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  64     };
  65     d.add(c3);
  66
  67
  68     var c4 = new qx.ui.basic.Atom("Hover me");
  69     with(c4)
  70     {
  71       setTop(48);
  72       setLeft(380);
  73       setBackgroundColor(new qx.renderer.color.Color("#F5E0BB"));
  74       setWidth(100);
  75       setHeight(100);
  76       setTabIndex(1);
  77       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  78     };
  79     d.add(c4);
  80
  81
  82     var c5 = new qx.ui.basic.Atom("Hover me", "icon/32/colors.png");
  83     with(c5)
  84     {
  85       setTop(248);
  86       setLeft(20);
  87       setBackgroundColor(new qx.renderer.color.Color("#F5E0BB"));
  88       setTabIndex(1);
  89       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  90       setPadding(4);
  91     };
  92     d.add(c5);
  93
  94
  95     var tt1 = new qx.ui.popup.ToolTip("Hello World #1");
  96     c1.setToolTip(tt1);
  97     c2.setToolTip(tt1);
  98
  99     var tt2 = new qx.ui.popup.ToolTip(null, "icon/16/help.png");
 100     c3.setToolTip(tt2);
 101
 102     var tt3 = new qx.ui.popup.ToolTip("Hello World #3", "icon/16/help.png");
 103     c4.setToolTip(tt3);
 104
 105     var tt4 = new qx.ui.popup.ToolTip("Such a great tooltip with a<br/>(show) timeout of 50ms.", "icon/32/bug.png");
 106     c5.setToolTip(tt4);
 107     tt4.setShowInterval(50);
 108   });
 109   </script>
 110 </body>
 111 </html>