SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Tooltip

 

<tooltip font='string' 
         bold='boolean' 
         size='number'  
         color='string'
         alpha='number' 
         fill_color='string'
         fill_alpha='number' 
         line_color='string' 
         line_alpha='number'
         line_thickness='number'
         x='number'
         y='number'
         duration='number'  
         >tooltip text</tooltip>
      


Description

Tooltip can be added to an object to provide information when the mouse hovers over the object. Tooltips differ from notes in that they are always automatically triggered by the cursor location and always follow the cursor:

 

The tooltip attributes are:

  • font: The font used to draw the tooltip (see font). The default is Arial.

  • bold: A boolean value that indicates whether the font is bold or not. Valid values are true or false. The default is true.

  • size: The font's size. The default 12.

  • color: The font's 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 affects the text's transparency, only when an embedded font is used (see font). Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 1.

  • fill_color: The 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).

  • fill_alpha: The background transparency value. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is .25.

  • line_color: The border's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • line_alpha: The border's transparency value. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 1.

  • line_thickness: The border's thickness. The default is 2 pixels.

  • x: The tooltip's horizontal position relative to the cursor. Positive values offset it right. Negative values offset it left. The default is -3.

  • y: The tooltip's vertical position relative to the cursor. Positive values offset it down. Negative values offset it up. The default is 20.

  • 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.

 


Multi-line Text

To break a text into multiple lines, use the return's hex value %0D. Example:

<tooltip>Show this in%0Dtwo lines.</tooltip>   

 


Tooltip Filters

Tooltip filters are applied to the tooltip's outline. For example, if a tooltip has an opaque background, then a shadow appears under the background, not the text. If a tooltip has a transparent background, then a shadow appears under the text. To apply filters to both the tooltip's background and text, use the standard filter attributes for the background and add the text_shadow, text_bevel, text_glow, and text_blur attributes for the text:

<!-- the shadow attribute is applied to the tooltip's outline (tooltip background) -->   
<!-- the text_shadow attribute is applied to the tooltip's text -->
<tooltip fill_alpha='.8' shadow='low' text_shadow='low'>text</tooltip>   

 

Example

<slickboard>

   <!-- a blue object -->
   <object >
      
      <rect x='50' y='50' fill_color='8888ff' shadow='default' /> 
      
      <!--the object's tooltip with a shadow filter-->
      <tooltip fill_color='ff4400' fill_alpha='.8' line_alpha='0' shadow='default' text_shadow='default'>Blue square</tooltip>   
   
   </object>   
   
   
   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us