Customize Tooltips

Building on the Quick Start example, you can add labels to your tooltip text from an object array using the tooltipContent option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the data to a complex array with two fields, and uses a function in the tooltipContent option to bind the score field to the sparkline, and to concatenate the month value with a colon, a space, and the score value.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { var data = [{ month: "January", score: 73 }, { month: "February", score: 95 }, { month: "March", score: 89 }, { month: "April", score: 66 }, { month: "May", score: 50 }, { month: "June", score: 65 }, { month: "July", score: 70 }, { month: "August", score: 43 }, { month: "September", score: 65 }, { month: "October", score: 27 }, { month: "November", score: 77 }, { month: "December", score: 58 }]; $("#wijsparkline").wijsparkline({ data: data, bind: "score", tooltipContent: function(){ return this.month + ': ' + this.score; } }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
    $(document).ready(function () {
        var data = [{ month: "January", score: 73 }, { month: "February", score: 95 }, { month: "March", score: 89 },
            { month: "April", score: 66 }, { month: "May", score: 50 }, { month: "June", score: 65 },
            { month: "July", score: 70 }, { month: "August", score: 43 }, { month: "September", score: 65 },
            { month: "October", score: 27 }, { month: "November", score: 77 }, { month: "December", score: 58 }];
        $("#wijsparkline").wijsparkline({
            data: data,
            bind: "score",
            tooltipContent: function(){
                return this.month + ': ' +  this.score;
            }
        });
    });
});
</script>

In the <body> section of your HTML file, the <div> tag is changed to a <table> to show the sparkline inline with text.

Markup	Copy Code
<table> <tr> <td>Scores this year were all over the place:</td> <td><div id="wijsparkline" style="height:20px;width:100px" /></td> </tr> </table>

Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Hover your cursor over the sparkline in various places to see the tooltip text showing the data as well as the month name for each month.

Widgets

SparkLine

Reference

wijsparkline API

data Option

bind Option

tooltipContent Option

tooltipFormat Option