ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Conditional styling of tooltip text on mouseover
Posted by saurabh on Sep-22-2016 15:25
| Reply | Monitor
Hi there,
I have a line layer chart having 3 layers and multiple datasets leading to multiple line curves in chart . I am showing a tooltip on mouse hover using javascript (show/hide a div with Showtext and Hidetext on mouseover). Tooltip div text consists of values of various line curves at that point. I want that when a user hovers mouse over a particular line curve, tooltip text corresponding to that particular dataset should be styled dynamically. Particularly I want that tooltip div text for that dataset only is of same color as the line color for that dataset. When user moves to another point on another line curve the text corresponding to that curve is of same color as that curve (on which mous cursor is currently) and so on.

relevant code is :

showText = "onmouseover='setDIV(""{layerId}{dataItem}"", ""visible"");' "
'Client side Javascript to hide detail information "onmouseout"
hideText = "onmouseout='setDIV(""{layerId}{dataItem}"", ""hidden"");' "
'"alt" attribute to show tool tip
toolTip = "title='time:{x},value: {value|0} %'"
'Create an image map for the chart
urlname="xystub.asp"
imageMap = c.getHTMLImageMap(urlname, "", showText & hideText)

tooltip divs are like:
<div id="2246"
        style="font-size:13;visibility:hidden;position:absolute;left:65px;top:400px;border:thin solid blue;background-color: white;">
        TIME= 7/19/2016 11:06:00 PM

        dataset1_value = 68.4
(// for e.g. This text color should be set on mouseover whenver user is on dataset1 curve)
        dataset2_value = 68.4

        dataset3_value = 68.4

        dataset4_value = 68.4

</div>

I have searched but could not find any way to do so. Any hints will be highly appreciated. Thanks in advance.

  Re: Conditional styling of tooltip text on mouseover
Posted by Peter Kwan on Sep-22-2016 22:40
| Reply | Monitor
Hi saurabh,

You can use Layer.setHTMLImageMap to configure different tooltips for different layers.
However, if the tooltips are essentially the same for all datasets but are only different for some custom parameters, you can use Layer.addExtraField for the custom parameters.

For example, suppose you would like to have an extra "style" parameter (which can contain the CSS style), such as:

showText = "onmouseover='setDIV(""{xxxxx}"", ""{layerId}{dataItem}"", ""visible"");' "

where {xxxxx} should be some style parameter that differs for each dataset, you can use:

'Create an array of styles, with one element for each data set, and add the array
'as an extra field
myStyles = Array("color:#FF0000", "color:#BBBBBB")
Call myLayer.addExtraField(myStyles)

'Use the extra field as the first argument to setDIV, indexed by the data set
showText = "onmouseover='setDIV(""{dsField0}"", ""{layerId}{dataItem}"", ""visible"");' "

You can repeat the above for all the layers in your chart. You can then modify setDIV to use the first argument as the style of the tooltip.

Hope this can help.

Regards
Peter Kwan