Click here to see the SAS code.
Click here to see the example.
Click here to see the html version of the example.

---------------------------------------------------------------

Have you ever wanted to control the size & color of html hover-text?

How about having hover-text that stays up as long as you want (rather 
than going away after a couple of seconds)?!? ...

Also, do you want hover-text that works on Apple iPad/iPhones?!?
(if you lightly single-tap on the states in this map, you can see
their hover-text in this example!)

Well ... this is one way to do it!  

This example shows how to use the javascript library found at
http://www.walterzorn.de/en/tooltip/tooltip_e.htm
in combination with SAS/Graph output, to do those things!

-----

First I downloaded & saved the wz_tooltip.js file.

Then I customize the ODS style to write out some prehtml 
that points to the javascript (note that I've added some 
spaces in this line, so it will show up in this html doc,
rather than getting interpreted):

  prehtml = " < script type='text/javascript' src='wz_tooltip.js' >< /script > ";


And next I stuff the desired text into the 'rollover' variable,
putting the desired text & font/color/etc in the 'Tip()' ...
[Probably good to do a "proc print" of this variable, or look
at it in the table viewer, to see exactly how it comes out - the
quotes within quotes can get a bit tricky!]

  mouseovercmd="Tip('"||trim(left(put(population,comma20.0)))||"'"||
    ", TITLE, '"||trim(left(statename))||"'"||
    ", TITLEALIGN, 'center'"||
    ", TEXTALIGN, 'center'"||
    ", FONTSIZE, '30pt'"||
    ", FONTCOLOR, '#000000', FONTWEIGHT, 'bold', BGCOLOR, '#FFFFFF'"||
    ", TITLEFONTCOLOR, '#FFFFFF', TITLEBGCOLOR, '#000000'"||
    ")";

  rollover='onMouseOver='||quote(trim(left(mouseovercmd)));


Then I specify the 'rollover' variable as my 'html=' in the SAS/Graph proc:

   proc gmap data=my_data map=my_map;
   id statename;
   choro population / levels=5 nolegend coutline=black html=rollover;
   run;


By comparison, here's the version using html 'title=' tags for rollover text:
html_text.htm


Back to Samples Index