Hi,

Please find attached the modified sample - I have styled the tooltip to achieve the same look and feelas of the above screenshot. Please let me know if you have further questions on the matter.

Thank you so much for your quick response,

1. Can we set different color for label and its value like showing in my previous post snapshot (label= grey, value = white)?
2. How can we set white and gray rounded border like showing in snapshot. We want to achieve same look and feel, can you modify my sample application its really very helpful for us?

Hi,

Your styles are not applied because they get overridden by .ui-widget-content.ui-chart-tooltip in infragistics.theme.css file. So to fix this you just need to add  !important after each style or increase the css specifity of the .ui-chart-tooltip class. Adding !important is considered a bad practice so I suggest going for the latter. You can achieve it by using the id of the tooltip container element:

        div#priceSeries0_tooltip.ui-chart-tooltip {
            -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
            -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5) !important;
            box-shadow: 2px 2px rgba(0,0,0,0.5);
            background-color:black;  
            border:solid;   
            border-color:red !important;
        }

This css class has really high specificity and most styles defined will be applied. In this case !important directive is added only to the border-color and box-shadow properties as they get overridden by inline styles

The id of the element is build the following way:

<seriesName> + "_tooltip"  so in your case it is "priceSeries0_tooltip". Following this template you can build the string instead of hardcoding it, if this is necessary on some occasions.

Please let me know if this helps.

Hi Hristo,

Thanks for reply, we already used .ui-chart-tooltip class for styling, but background color and border color are not applied, what we are missed? Please see my sample application. Modified sample is really very helpful for us.

Hi,

the class used to style the tooltip container is .ui-chart-tooltip

You can change its styles directly in the default infragisticas.ui.chart.css file or find the tooltip container element using this class and apply adittional css class with the desired styles.