XML/SWF Charts| SlickBoard| Timeline Eons(New)

 < previousnext > 

 

tooltip

 

<tooltip font='string' 
         bold='boolean' 
         size='number' 
         color='string'
         alpha='number'

         background_color_1='string' 
         background_color_2='string' 
         background_alpha='number' 
         
         duration='number' 
         
         shadow='string'
         bevel='string'
         glow='string'
         blur='string'
         />
             


Description

tooltip defines the look of the cursor label that appears when the mouse moves over some chart elements. The tooltip is the black on red label that appears when moving the mouse over the chart and the link area here:

 

The tooltip attributes are:

  • font: The font applied to the tooltip's text (see Fonts). The default is Arial.

  • bold: A boolean that indicates whether the font is bold or not. The default is true.

  • size: The text size. The default is 12.

  • color: The text color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "FFFFFF" (white).

  • alpha: This determines the text's transparency only when the embedded font is used (see Fonts). Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • background_color_1: The tooltip's primary background color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black). If background_color_2 is omitted, then only background_color_1 is used for the tooltip's background.

  • background_color_2: The tooltip's secondary background color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. If both background_color_1 and background_color_2 are defined, then background_color_1 is used as an outline for background_color_2.

  • background_alpha: The tooltip's background transparency. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 50.

  • duration: The tooltip disappears when the mouse stops moving. This attribute determines the number of seconds to wait before removing it. The default is 5.

  • shadow: The ID of a shadow filter to apply to the tooltip. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the tooltip. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the tooltip. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the tooltip. This is omitted by default (no blur).

 


Displaying a Tooltip

In addition to defining the look of the tooltip with the above tooltip tag, it is necessary to determine which chart element displays a tooltip.

To display a tooltip over the graphic elements that correspond to data values, add a tooltip parameter to chart_data's <number> tags. It can be added to all, some, or none of the number tags:

  
   <!-- add a tooltip to the lowest and highest data values -->   
   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number tooltip='low'>20</number>
         <number>75</number>
         <number>85</number>
      </row>
      <row>
         <string>Region B</string>
         <number>40</number>
         <number>25</number>
         <number tooltip='high'>105</number>
      </row>
   </chart_data>   
  

 

To display a tooltip over a link area, add a tooltip parameter to link's <area> tags. It can be added to all, some, or none of the area tags:


   <!-- add a tooltip to the first link area -->                    
   <link>
   
      <area x='27' 
            y='200' 
            width='66'  
            height='25' 
            url='http://www.google.com' 
            tooltip='http://www.google.com' 
            />
           
      <area x='97' 
            y='200' 
            width='66'  
            height='25' 
            url='http://www.youtube.com'
            />
            
   </link>

 

To add a multi-line tooltip, break the text lines with \r:

 
   tooltip='Click to go to:\rhttp://www.google.com'                
      

 

 

Example

<chart>

   <!-- add a tooltip to all data values -->     
   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number tooltip='20\rLowest Value'>20</number>
         <number tooltip='75'>75</number>
         <number tooltip='85'>85</number>
      </row>
      <row>
         <string>Region B</string>
         <number tooltip='40'>40</number>
         <number tooltip='25'>25</number>
         <number tooltip='105\rHighest Value'>105</number>
      </row>
   </chart_data>
   <chart_rect height='100' />

   <draw>
      <rect x='167' y='200' width='66' height='25' fill_color='dddddd' />   
      <text x='179' y='204'>google</text>
   </draw>   
   <filter>
      <shadow id='low' alpha='75' blurX='8' blurY='8' distance='3' />
   </filter>

   <!-- add a tooltip to the link -->  
   <link>
      <area x='167' 
            y='200' 
            width='66'  
            height='25' 
            url='http://www.google.com' 
            tooltip='http://www.google.com' 
         />
   </link>

   <!-- define the tooltip look -->  
   <tooltip color='FFFFFF'
            alpha='75'
            size='11'
            background_color_1='ff4400' 
            background_color_2='8888ff' 
            background_alpha='90'
            shadow='low'
            />

</chart>

 

 < previousnext > 


Copyright 2003-2014, maani.us