Dynamically set tooltip background color on point hover

[Luis]

Hello all.
I currently have a kendo chart configured with two different series as can be seen in the following code:

@(Html.Kendo().Chart(Model)
            .Name("financialChart")            
            .DataSource(dataSource => dataSource                
                .Sort(s => s.Add(fc => fc.Date))
            )
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
                .Labels(labels => labels
                    .Template("#= series.name #"))
            )
            .ChartArea(chartArea => chartArea
                .Background("transparent")
            )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Line().Style(ChartLineStyle.Smooth)
            )
            .Series(series =>
            {
                series.Line(value => value.MyValue, category => category.Date)                  
                  .DashType(ChartDashType.Dash)
                  .Name("Series1")
                  .Color("red")                                    
                  .Aggregate("selectLastPoint1");
                
             series.Line(value => value.MyValue, category => category.Date)
                 .Name("Series2")
                 .Color("blue")                 
                 .Aggregate("selectLastPoint2");
            })
            .CategoryAxis(axis => axis                        
                        .Labels(labels => labels.Rotation(0).Format("MMM 'yy"))
                        .Date()                        .
                        .BaseUnit(ChartAxisBaseUnit.Months)                                        
            )
            .ValueAxis(axis => axis.Numeric()                
                )
            .Tooltip(t => t
                .Visible(true)
                .Format("{0:c}")
                .Template("#= kendo.format('{0:C}', dataItem.MyValue) #")                               
            )            
            .HtmlAttributes(new { style = "margin: 0 15px 0 15px" })            
)

As you can see, Series1 is red and Series 2 is blue. However, Series1 and Series 2 have both a common point that is:

Series 1:
Jan 2014 - $50 - Point A
Feb 2014 - $100 - Point B

Series 2
Feb 2014 - $100 - Point C
Mar 2014 - $150 - Point D

When I hover over the points A and B the point fills in red and the tooltip has a red background. When I hover over points C and D the point fills in blue and the tooltip appears blue also.What I want is that point C has a RED fill and a RED tooltip as if it belonged to Series 1 and not Series 2.
The question is: Is there anyway that I can dinamycally set the tooltip color on the hover of the point?

[Luis]

EDIT:
I have added a JSFiddle in order to illustrate whats happening:
http://jsfiddle.net/nmcLh0x1/

When hovering on the second point for 2003 from the left, a red point and a red tooltip is displayed. When hovering from the right, a blue tooltip and a blue point is displayed. I want this point to be ALWAYS red.

[Daniel]

Hello Luis,

The tooltip background cannot be dynamically set but it is possible to set the background to an element in the template. The background of the tooltip element can be hidden in this case via CSS and some configuration options. I updated the example to demonstrate this approach.

Regards,
Daniel
Telerik