RGraph/docs/tooltips.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html >
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  13         * | This package is licensed under the RGraph license. For all kinds of business |
  14         * | purposes there is a small one-time licensing fee to pay and for non          |
  15         * | commercial  purposes it is free to use. You can read the full license here:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21     <title>RGraph: HTML5 canvas graph library - Tooltips</title>
  22
  23     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  24     <link rel="icon" type="image/png" href="../favicon.png">
  25
  26     <script src="../libraries/RGraph.common.core.js"></script>
  27     <script src="../libraries/RGraph.common.tooltips.js"></script>
  28     <script src="../libraries/RGraph.line.js"></script>
  29     <script src="../libraries/RGraph.bar.js"></script>
  30     <script src="../libraries/RGraph.pie.js"></script>
  31     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  32
  33     <style>
  34         .bar_chart_tooltips_css {
  35             background-color: white ! important;
  36             border: 2px solid black ! important;
  37             padding: 3px;
  38             -webkit-box-shadow: 0 0 15px gray ! important;
  39             -moz-box-shadow: 0 0 15px gray ! important;
  40             box-shadow: 0 0 15px gray ! important;
  41         }
  42     </style>
  43 </head>
  44 <body>
  45
  46     <!-- Social networking buttons -->
  47     <script src="../libraries/RGraph.common.core.js" ></script>
  48
  49     <script>
  50         function HideTwitterDIV ()
  51         {
  52             document.getElementById("twitter_div").style.opacity = 0;
  53             document.getElementById("twitter_div").style.display = 'none';
  54         }
  55
  56
  57         function ShowTwitterDIV (e)
  58         {
  59             var e   = RGraph.FixEventObject(document.all ? event : e);
  60             var div = document.getElementById("twitter_div");
  61             var img = document.getElementById("twitter_icon");
  62
  63             div.style.display = 'block';
  64             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  65             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  66
  67             /**
  68             * Fade it in
  69             */
  70             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  71             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  72             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  73             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  74             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  75
  76             e.stopPropagation();
  77
  78             return false;
  79         }
  80
  81         /**
  82         * This code installs the event handler that hides the Twitter DIV
  83         */
  84         if (RGraph.isIE8()) {
  85              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  86         } else {
  87             window.addEventListener('click', HideTwitterDIV, false);
  88         }
  89     </script>
  90
  91     <!-- The twitter DIV -->
  92     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
  93         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
  94         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  95     </div>
  96
  97     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  98         <script>
  99             // Opera fix
 100             if (navigator.userAgent.indexOf('Opera') == -1) {
 101               document.getElementById("social_icons").style.position = 'fixed';
 102               document.getElementById("twitter_div").style.position = 'fixed';
 103
 104             }
 105         </script>
 106
 107         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 108
 109
 110             <div id="social">
 111                 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
 112                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 113                 </a>
 114
 115                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 116                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 117                 </a>
 118
 119
 120 <!--
 121                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
 122                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 123                 </a>
 124
 125
 126                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
 127                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 128                 </a>
 129
 130                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 131                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 132                 </a>
 133
 134                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 135                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 136                 </a>
 137 -->
 138             </div>
 139     </div>
 140     <!-- /Social networking buttons -->
 141
 142     <div id="breadcrumb">
 143         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 144         >
 145         <a href="index.html">Documentation</a>
 146         >
 147         Tooltips
 148     </div>
 149
 150     <h1>RGraph: HTML5 canvas graph library - Tooltips</h1>
 151
 152     <script>
 153         if (RGraph.isIE8()) {
 154             document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
 155         }
 156     </script>
 157
 158     <div style="float: right; text-align: right">
 159         <canvas width="600" height="250" id="cvs">[No canvas support]</canvas><br />
 160         Tooltip effect:
 161         <select id="effect" onchange="RGraph.Clear(line.canvas); line.Set('chart.tooltips.effect', this.options[this.selectedIndex].value); line.Draw();">
 162             <option>none</option>
 163             <option selected>fade</option>
 164             <option>expand</option>
 165             <option>contract</option>
 166             <option>snap</option>
 167         </select>
 168     </div>
 169
 170     <script>
 171         /**
 172         * This is the function which handles the display of all the tooltips (for the line chart) - it is passed the
 173         * zero-indexed number of the tooltip. Here, that index is just used to get the text from an array, but you
 174         * could do anything with it. You could even perform an AJAX request to get the tooltip. Note that at this
 175         * point, ie when the text is being retrieved, the tooltip DIV doesn't exist yet.
 176         */
 177         function myTooltipFunc (idx)
 178         {
 179             var tooltips = ['<b>Winner!</b><br />John','Fred','Jane','Lou','Pete','Kev'];
 180             return tooltips[idx];
 181         }
 182
 183
 184         window.onload = function ()
 185         {
 186             // Has to be a global variable
 187             line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
 188
 189             /**
 190             * These lines show you some of the alternative methods  of specifying tooltips:
 191             *
 192             *  o An array of strings - one per tooltip
 193             *  o An array of functions - one per tooltip
 194             *  o A single function that handles all of the tooltips
 195             * o An "id:xxx" string (xxx being the ID tag of a div whose contents are used as the tooltip)
 196             *
 197             * Functions are passed a single argument - the zero-indexed number of the tooltip
 198             */
 199             //line.Set('chart.tooltips', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
 200             //line.Set('chart.tooltips', [myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc]);
 201             line.Set('chart.tooltips', myTooltipFunc);
 202             line.Set('chart.tooltips.effect', 'fade');
 203             line.Set('chart.gutter', 30);
 204             line.Set('chart.hmargin', 10);
 205             line.Set('chart.linewidth', 2);
 206             line.Set('chart.shadow', true);
 207             line.Set('chart.shadow.offsetx', 0);
 208             line.Set('chart.shadow.offsety', 0);
 209             line.Set('chart.shadow.blur', 15);
 210             line.Set('chart.colors', ['green']);
 211             line.Set('chart.tickmarks', 'circle');
 212             line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
 213             line.Draw();
 214
 215
 216             /* -------------------------------------------------------------------------------------------------------- */
 217
 218
 219             /**
 220             * Create and display the bar chart
 221             */
 222             bar = new RGraph.Bar('cvs2', [41.2,51.3,64.2,42.1,32.2,43.2,45.8,45.1,61.1]);
 223
 224             var gradient = bar.context.createLinearGradient(0,25,0,225);
 225             gradient.addColorStop(1, 'white');
 226             gradient.addColorStop(0, 'blue');
 227
 228             bar.Set('chart.hmargin', 15);
 229             bar.Set('chart.colors', [gradient]);
 230             bar.Set('chart.linewidth', 2);
 231             bar.Set('chart.tickmarks', 'endsquare');
 232             bar.Set('chart.labels', ['John', 'Pete', 'Glynn', 'Kev', 'Youssef', 'Lou', 'Kiff', 'Liz', 'Fred']);
 233             bar.Set('chart.background.grid.autofit', true);
 234             bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
 235             bar.Set('chart.tooltips', getTooltip); // The getTooltip() function (defined below) provides the tooltip text ONLY
 236             bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');
 237             bar.Set('chart.tooltips.effect', 'fade');
 238             bar.Draw();
 239
 240             /**
 241             * This installs the RGraph ontooltip event handler. The CreateTooltipGraph() function is defined below
 242             */
 243             RGraph.AddCustomEventListener(bar, 'ontooltip', CreateTooltipGraph);
 244         }
 245
 246
 247         /*
 248         * Used by the bar chart to get the tooltip text.
 249         *
 250         * @param idx int The zero indexed number of the tooltip
 251         */
 252         function getTooltip(idx)
 253         {
 254             return '<b>' + bar.Get('chart.labels')[idx] + 's stats:</b><br /><canvas id="__tooltip_canvas__" width="400" height="150" style="background-color: white; margin: 5px">[No canvas support</canvas>';
 255         }
 256
 257
 258         /**
 259         * This is the function that is called (by the ontooltip event) to create the tooltip charts
 260         *
 261         * @param obj object   The graph object
 262         */
 263         function CreateTooltipGraph(obj)
 264         {
 265             // These are the statistics that are shown in the tooltips. This data could quite easily
 266             // come from your server.
 267             var stats = [
 268                          [5,8,7,6,9,5,4,6,3,5,4,4],
 269                          [4,6,7,8,6,5,4,4,2,5,8,4],
 270                          [3,2,1,3,4,5,1,5,6,7,4,1],
 271                          [3,5,1,2,4,8,9,6,7,4,5,1],
 272                          [9,6,7,8,7,9,4,5,6,3,5,8],
 273                          [4,8,5,6,4,3,5,4,6,5,7,8],
 274                          [4,3,4,9,8,7,8,6,4,3,5,1],
 275                          [1,2,3,1,2,4,5,1,6,5,3,1],
 276                          [2,3,5,4,3,5,1,3,5,2,6,4]
 277                         ];
 278
 279             var idx  = RGraph.Registry.Get('chart.tooltip').__index__;
 280             var data = stats[idx];
 281
 282             // This data could be dynamic
 283             var g  = new RGraph.Line('__tooltip_canvas__', data);
 284             g.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 285             g.Set('chart.gutter', 20);
 286             g.Set('chart.hmargin', 5);
 287             g.Set('chart.tickmarks', 'endcircle');
 288             g.Set('chart.background.grid.autofit', true);
 289             g.Draw();
 290         }
 291
 292
 293     </script>
 294
 295     <ul>
 296         <li><a href="#introduction">Introduction</a></li>
 297         <li><a href="#hold">What can they hold?</a></li>
 298         <li><a href="#how">How can I specify them?</a></li>
 299         <li><a href="#what">What can I specify?</a></li>
 300         <li><a href="#graphs">Can I show graphs in tooltips?</a></li>
 301         <li><a href="#customise">Can I customise the appearance of tooltips?</a></li>
 302         <li><a href="#effects">What tooltip effects are available?</a></li>
 303         <li><a href="#firefox">Tooltips, the clipboard and Firefox</a></li>
 304         <li><a href="#override">Can I override the tooltip function?</a></li>
 305     </ul>
 306
 307     <a name="introduction"></a>
 308     <h4>Introduction</h4>
 309
 310     <p>
 311         Tooltips are a very effective and straight forward way to extend your graphs and add more information to them, without overloading
 312         the user.
 313     </p>
 314
 315     <a name="hold"></a>
 316     <h4>What can they hold?</h4>
 317
 318     <p>
 319         At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See <a href="#graphs">below</a>
 320         for information on showing graphs in tooltips.
 321     </p>
 322
 323     <a name="how"></a>
 324     <h4>How can I specify them?</h4>
 325
 326     <p>
 327         You can specify them by including the tooltips code and then using the <i>chart.tooltips</i> property. For example:
 328     </p>
 329
 330     <ol>
 331         <li>
 332             Include the RGraph libraries.
 333             <pre class="code">
 334 &lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
 335 &lt;script src="RGraph.common.tooltips.js"&gt;&lt;/script&gt;
 336 &lt;script src="RGraph.line.js"&gt;&lt;/script&gt;
 337 </pre>
 338         </li>
 339
 340         <li>
 341             Define your graph and set the tooltips property.
 342             <pre class="code">
 343 &lt;script&gt;
 344     window.onload = function ()
 345     {
 346         var line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
 347         <span style="color: green">line.Set('chart.tooltips', ['&lt;b&gt;Winner!&lt;/b&gt;&lt;br /&gt;John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);</span>
 348         line.Set('chart.tooltips.effect', 'expand');
 349         line.Set('chart.gutter', 30);
 350         line.Set('chart.hmargin', 10);
 351         line.Set('chart.linewidth', 2);
 352         line.Set('chart.shadow', true);
 353         line.Set('chart.shadow.offsetx', 0);
 354         line.Set('chart.shadow.offsety', 0);
 355         line.Set('chart.shadow.color', 'green');
 356         line.Set('chart.shadow.blur', 25);
 357         line.Set('chart.colors', ['green']);
 358         line.Set('chart.tickmarks', 'circle');
 359         line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
 360         line.Draw();
 361     }
 362 &lt;/script&gt;
 363 </pre>
 364         </li>
 365     </ol>
 366
 367     <a name="what"></a>
 368     <h4>What can I specify?</h4>
 369
 370     <p>
 371         The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about
 372         to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify
 373         one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish.
 374         These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip
 375         text. So to summarise:
 376     </p>
 377
 378     <ul>
 379         <li>
 380             An array of strings. The string is used as the tooltip. Eg:
 381             <pre class="code">myGraph.Set('chart.tooltips', ['John', 'Fred', 'Lou']);</pre>
 382         </li>
 383
 384         <li>
 385             An array of function objects. Each function is called and should return the text to be used. Eg:
 386             <pre class="code">myGraph.Set('chart.tooltips', [getJohnTooltip, getFredTooltip, getLouTooltip]);</pre>
 387         </li>
 388
 389         <li>
 390             A single function object. This is probably the most useful. This function is called whenever a tooltip
 391             is about to be displayed, and passed the numerical, zero-indexed tooltip index of the graph. The function should
 392             return the text to be used as the tooltip. Note that the function you specify is called <i>before</i>
 393             the tooltip DIV has been created, so you cannot access it. If you wish to customise the appearance
 394             of the tooltip, you can use either the tooltip <a href="css.html">CSS class</a> or a call to <i>setTimeout()</i>. Eg:
 395             <pre class="code">myGraph.Set('chart.tooltips', getTooltip);</pre>
 396         </li>
 397
 398         <li>
 399             An array of DIV ids. This will make working with large tooltips easier. You basically specify the id of a DIV whose
 400             .innerHTML is then used as the tooltip. Only the contents of the DIV are used, not the DIV itself, so you can hide
 401             the DIV by setting its <i>display</i> CSS value to <i>none</i>. An example of this in action is the
 402             <a href="../examples/line.html">first line chart</a>. For example:
 403
 404             <pre class="code">myBar.Set('chart.tooltips', ['id:myDiv', ...])</pre>
 405         </li>
 406     </ul>
 407
 408     <a name="graphs"></a>
 409     <h4>Can I show graphs in tooltips?</h4>
 410
 411     <canvas style="float: right" id="cvs2" width="600" height="250">[No canvas support]</canvas>
 412
 413     <p>
 414         You can, and with the custom event support that RGraph has (as of 10th July 2010), it's reasonably easy. Simply attach your function that
 415         creates the graph to the <i>ontooltip</i> event. This allows the tooltip HTML to be created and added to the page
 416         so that the code that creates the graph can run. The sequence is:
 417     </p>
 418
 419     <ol>
 420         <li style="margin-top: 0">Specify the HTML for the tooltip as normal (including the &lt;canvas&gt; tag).</li>
 421         <li style="margin-top: 0">Use the <i>ontooltip</i> RGraph event so that a function is called when a tooltip is shown.</li>
 422         <li style="margin-top: 0">This function should subsequently create the graph.</li>
 423     </ol>
 424
 425     <p>
 426         The tooltip DIV is to be found in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. And if you want it the
 427         numerical zero indexed count of the tooltip is to be found in the <i>__index__</i> property:
 428         <i>RGraph.Registry.Get('chart.tooltip').__index__</i>
 429     </p>
 430
 431     <pre class="code">
 432 &lt;script src="RGraph.common.core.js" &gt;&lt;/script&gt;
 433 &lt;script src="RGraph.common.tooltips.js" &gt;&lt;/script&gt;
 434 &lt;script src="RGraph.bar.js" &gt;&lt;/script&gt;
 435 &lt;script src="RGraph.line.js" &gt;&lt;/script&gt;
 436
 437 &lt;style&gt;
 438     .RGraph_tooltip {
 439         background-color: white ! important;
 440     }
 441 &lt;/style&gt;
 442
 443 &lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
 444
 445 &lt;script&gt;
 446     window.onload = function ()
 447     {
 448         labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];
 449
 450         bar = new RGraph.Bar("cvs", [4.5,28,13,26,35,36]);
 451         bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats&lt;br/&gt;&lt;canvas id="__tooltip_canvas__" width="400" height="150"&gt;[No canvas support]&lt;/canvas&gt;';});
 452         bar.Set('chart.hmargin', 10);
 453         bar.Set('chart.tickmarks', 'endcircle');
 454         bar.Set('chart.colors', ['blue']);
 455         bar.Set('chart.ymax', 100);
 456         bar.Set('chart.gutter', 30);
 457         bar.Set('chart.labels', labels);
 458         bar.Draw();
 459
 460         <span style="color: green">RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);</span>
 461     }
 462
 463
 464     <span style="color: green">
 465     /**
 466     * This is the function that is called by the ontooltip event to create the tooltip charts
 467     *
 468     * @param obj object   The graph object
 469     */
 470     function CreateTooltipGraph(obj)
 471     {
 472         // This data could be dynamic
 473         var line  = new RGraph.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]);
 474         line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 475         line.Set('chart.gutter', 20);
 476         line.Set('chart.hmargin', 5);
 477         line.Set('chart.tickmarks', 'endcircle');
 478         line.Set('chart.background.grid.autofit', true);
 479         line.Draw();
 480     }
 481     </span>
 482 &lt;/script&gt;
 483 </pre>
 484
 485     <p>
 486         If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart.
 487     </p>
 488
 489     <br clear="all" />
 490
 491         <a name="customise"></a>
 492         <h4>Can I customise the appearance of tooltips?</h4>
 493
 494         <p>
 495             Yes. You can either use the default CSS class <i>RGraph_tooltip</i>, or you can specify a specific CSS class that a
 496             graphs tooltips should use with the property <i>chart.tooltips.css.class</i>. The two graphs on this page have
 497             different looking tooltips by using this method - the line graph uses the default look, whilst the bar chart
 498             overrides the CSS class name and sets it to <i>bar_chart_tooltips_css</i>. For example:
 499         </p>
 500
 501         <pre class="code">bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');</pre>
 502
 503         <pre class="code">
 504 &lt;style&gt;
 505     .bar_chart_tooltips_css {
 506         background-color: white ! important;
 507         border: 2px solid black ! important;
 508         padding: 3px;
 509     }
 510 &lt;/style&gt;
 511 </pre>
 512
 513         <p>
 514             You can read more about RGraph CSS classes <a href="css.html">here</a>.
 515         </p>
 516
 517         <a name="effects"></a>
 518         <h4>What tooltip effects are available?</h4>
 519
 520         <p>
 521             These effects are available to you:
 522         </p>
 523
 524         <ul>
 525             <li>fade</li>
 526             <li>expand</li>
 527             <li>contract</li>
 528             <li>snap</li>
 529             <li>none</li>
 530         </ul>
 531
 532         <p>
 533             All of them are as their names imply. <i>fade</i> is a straight forward fade in effect, <i>expand</i> is another effect
 534             which expands outward from the center of the tooltip, <i>contract</i> is like the <i>expand</i> effect but in reverse, <i>snap</i> is an effect which can be used in a limited set of circumstances
 535             and "snaps" to the current mouse position and <i>none</i> is simply no effect at all. The default effect used
 536             by all graph types is <i>fade</i>. Note: If you're showing canvases in your tooltips then the <i>expand</i>, <i>contract</i> and <i>snap</i>
 537             effects will not work - you must use <i>fade</i> or <i>none</i>.
 538         </p>
 539
 540         <p>
 541             <b>Note:</b> The snap effect is only available to graph types where the tooltip is triggered using the onmousemove event.
 542             Currently this means the <i>Line chart</i>, <i>Rscatter graph</i>, <i>Scatter graph</i> and Tradar chart. It can also
 543             be negatively effected when using multiple graphs on one page.
 544         </p>
 545
 546
 547         <a name="firefox"></a>
 548         <h4>Tooltips, the clipboard and Firefox</h4>
 549
 550         <p>
 551             If you're using Firefox, there's a note about tooltips and the clipboard (ie copying text) on the <a href="issues.html">issues page</a>.
 552         </p>
 553
 554         <a name="override"></a>
 555         <h4>Can I override the tooltip function?</h4>
 556
 557         <p>
 558             You can by stipulating <i>chart.tooltips.override</i>. This should be a function object that handles everything with regard
 559             to showing the tooltip. Highlighting the graph is still done for you - the override function is only concerned with showing
 560             the tooltip. The override function is passed these arguments:
 561         </p>
 562
 563         <ul>
 564             <li>canvas - The HTML canvas element, the same as what you get from document.getElementById()</li>
 565             <li>text - The tooltip text (id:xxx strings are NOT expanded)</li>
 566             <li>x - The X coordinate in relation to the entire page</li>
 567             <li>y - The Y coordinate in relation to the entire page</li>
 568             <li>index - The numerical index of the tooltip in the original tooltip array</li>
 569         </ul>
 570
 571         <p>
 572             <b>Note:</b> Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the
 573             <i>RGraph.getTooltipText('id:xxx')</i> function.
 574         </p>
 575
 576         <pre class="code">
 577 &lt;script&gt;
 578     function tooltip_override (canvas, text, x, y, idx)
 579     {
 580         alert('In tooltip override function...');
 581     }
 582     myObj.Set('chart.tooltips.override', tooltip_override);
 583 &lt;/script&gt;
 584 </pre>
 585
 586 </body>
 587 </html>