Pardon the shameless headline, but this tutorial shows a really neat usage of rules that you probably don't know about. You've seen how to use rules to style tooltip color in How-to post #2, but you probably didn't realize that you can actually use images for a tooltip background, and you can use rules to call different images based on your data. As you'll find with most ZingChart features, customizing tooltips with rules and images is really easy once you know how to do it, which is why we started this "How-to" series of blog posts.

How to Style Tooltips with Custom Images

In this post, I'll briefly walk through how you can customize your tooltips with different background images for set ranges of data, as we've done in the graph below:

 

1. Create/size/crop your images

When selecting images for tooltips, something simple will work best, and saving as a transparent .png file will allow you to have no backgrounds or borders on your tooltip.

hint: Your tooltip-text will be positioned by default in the center of the entire tooltip width and height, so being aware of the center point when you cut your images will save you time and allow for great text positioning should you have any.

 

2. Code your tooltip object to allow background transparency, and turn repetition off

By default, the background-transparency and background-repeat strings are set to true, which allows non-customized tooltips to maintain a nice look. However, we're going to customize the "tooltip": object to get ready for transparent images, as we've done below.

"tooltip":  
     {  
     "margin": "30 30",  
     "font-color": "#000",  
     "bold": true,  
     "background-transparent": true,  
     "background-repeat": false  
     }

We've set the "margin": string above to allow a 30-pixel area around our tooltip-text, which will be plenty of room to show our images.

3. Add rules into the tooltip

Add a rules array inside the tooltip object, and set the values for which you'll call different background images. For this example we used four images with transitions at 50, 70 and 95.

Use greater/less than and equal to equations to set the exact data range of values (%v) for each image.

"tooltip":  
     {  
     "margin": "30 30",  
     "font-color": "#000",  
     "bold": true,  
     "background-transparent": true,  
     "background-repeat": false  
     "rules" : [  
         {  
         "rule" : "%v < 50",  
         "background-image" : "images/tooltip_cloud.png"  
         },  
         {  
         "rule" :"%v >= 50 && %v < 70",  
         "background-image" : "images/tooltip_sun.png"  
         },  
         {  
         "rule" :"%v >= 70 && %v < 95",  
         "background-image" : "images/tooltip_fireball.png"  
         },  
         {  
         "rule" : "%v >= 95",  
         "background-image" : "images/tooltip_devil.png"  
         }  
     ]

4. Finishing touches

Tooltips are set to display data values (%v) by default. This displayed text is customizable and can include other variables or HTML tags.  Here are some tips for customizing tooltip-text.

HTML Text

Tooltip-text is a string inside the "plot": object (or "series": array if different series need unique tooltips). In the above example, we added the HTML entity code for the degree sign to our tooltip text. Plain text, <br/> tags and other HTML attributes may also be applied.

"plot":{  
    "tooltip-text":" %v&deg;"  
     }

Variables

The following variables are allowed:

%v - value: set by default

%t - text: displays the "text": string from each series

%k - key: displays the scale-x value

%d - description: displays the "description": string from each series (New in ZingChart Version 1.1)

Do it Yourself

This example and others are available in the download package, so feel free to try for yourself. Remember, you can right-click any chart to view source the JSON that's used to build it. You can even copy/paste and use our JSON as a starting point.

More tutorials to come, so follow us or subscribe to the Zingers! blog to stay in touch.