Sparkline tooltip: Transparent property?

#1

Hello all, I have an issue with a Sparkline tooltip which partially hides the line area. Tooltip transparency might solve but does anybody know how to set :opacity or :background color for tooltip? I have tried to set them in various ways but no one seems to resolve. Thank you

0 Likes

#2

What have you tried so far? I thought CSS should work

Thanks

1 Like

#3

Hi Tony, I tried setting :background , :opacity
“id”: “metrics”,
“width”: 100,
“label”: “{~RevenueProtection.ListComponent.columns.sparkLine.label~}”,
"background: "black"
“colType”: “sparkline”,
“sparkline”: [
{
“field”: “ElectricityConsumptionLegacy”,
“type”: “line”,
“name”: “En.Att+ Mens.”,
“color”: “green”

                },
                {
                    "field": "ElectricityConsumptionInterval",
                    "type": "line",
                    "name": "En.Att+",
                    "color": "orange"

and also in the sparkline section. Any example of manipulating tooltip via CSS property ? Thanks!

0 Likes

#4
  1. Create a css file named theme.css in [path-to-your-project]/ui/content/assets/stylesheets
  2. Find the css selector of your tooltip (ex.".sparkline-chart .tooltip")
  3. Define the css class for your selector of your tooptip in theme.css. For example,
.sparkline-chart .tooltip {
  background-color: #000000;
}
  1. reprovision your package so that it will pick up your newly created theme.css

Please try it and let me know if it works.

Thanks

Tony

0 Likes

#5

and in your example, it’s missing a right double quote around “background” and a comma after “black”. I don’t know if it can be the reason

0 Likes