More hover label style customizations

I'm working on Dash Themes and I'd like to customize the look and feel of the hover labels more. In order of importance:
1 - Customize the background and text color of the trace name. Currently the background is semi-transparent and the text color is dark, rendering the name of the trace illegible.

2 - Customize border color and width
3 - Generic CSS? For example, it'd be nice if I could experiment with box-shadow like https://bl.ocks.org/sarubenfeld/56dc691df199b4055d90e66b9d5fc0d2 in the same style as my theme's buttons:

Possibly related, allow control over hover text alignment independent of hover placement position left/right/center, as mentioned here #260 and here https://stackoverflow.com/questions/50003531/r-plotly-hover-label-text-alignment

In brief, we should add attributes:

hoverlabel.namecolor
hoverlabel.bgnamecolor
hoverlabel.borderwidth (hoverlabel.bordercolor is already a thing)

and let's merge in #1665

hoverlabel.opacity

Could you please add hoverlabel.nameborderwidth as well :)

@etpinard

@etpinard The PR #3048 didn't include a namecolor setting, right? I'm currently running into problems with the readability of the name portion of a hoverlabel when the traces have a bright marker color (like yellow). I wish I could set the namecolor =(...

EDIT: Also super problems with one plot where I use a transparent marker color but black text color for the hoverlabel that doesn't get transported over to the name.

@chriddyp

@chriddyp suggested supporting generic CSS. That would cover all possible styling option of CSS available now and in the future. Something like hoverlabel.style or hoverlabel.css ? What do you think?

supporting generic CSS

Sure, we support this already in our pseudo-HTML - ie <span style="...">styled text</span> so there's precedent for it. I suspect there will be easy ways to use this to break our fragile sizing and positioning system, but you'll know pretty quickly if that has happened 😅 And I'm sure people would find used for it!

@alexcjohnson

@alexcjohnson I'm still missing hoverlabel.bgnamecolor. It's a real pain to use light coloured trace names, because you can't read them on that semi-transparent white default background. Is there really no other way than using hovertemplate strings to circumvent this?

This request from the forum https://community.plot.ly/t/rounded-corners-on-hover-text/31301 could also be addressed by the possibility to pass generic css (here border-radius).

The hover label is drawn as an SVG path, not in HTML - so I doubt that particular CSS would have the desired effect, though some of it does transfer.

@alexcjohnson

so I doubt that particular CSS would have the desired effect, though some of it does transfer

@alexcjohnson could you elaborate?

@mbkupfer

@mbkupfer the point is this isn't an HTML <div> with text inside it, so you can't style it as though it were; it's an SVG <path> with an SVG <text> on top. So if we allow arbitrary CSS it'll probably only apply to the <path>, and the attributes are quite different from those that apply to a <div>. Some are the same, but there's fill rather than background-color for example, and if we wanted to support border-radius we would need to manually build that into the path data, it can't be done through a simple style attribute.

So, just to be clear, hoverlabel transparency is not a thing yet, is that correct? I did try it in plotly python but the transparency does not take effect.

@vyaduvanshi

@vyaduvanshi not a thing yet. If you're looking for a (suboptimal) workaround, take a look at this. I have tried it and it worked for me.

@sebastianrosado

@sebastianrosado Oh, I know that solution. It is me who has answered it there 😋

Where are we on this? Is there just some css we can use to change the box-shadow, border radius, etc. of the hover templates?

Also, since we're here... how about allowing us to set the animation delay on the movement of tooltips. They are very choppy and not as smooth as other charting APIs, in which tooltips glide across the screen smoothly, rather than jumping.

Is there just some css we can use to change the box-shadow, border radius, etc. of the hover templates?

These hover labels are drawn in SVG, not HTML. So border radius isn't going to work, that would need to be implemented as part of the path for the label box. Some effects like box shadow may be possible through CSS, the trick will be finding the right selectors. I believe single-trace labels are <g.hovertext> elements containing a <path> for the main label, with a <rect> next to it for the trace name. If the common x position gets a label over the axis, that's a <g.axistext>. Unified hover labels will be a bit tricky with CSS because plotly.js internally actually thinks they're legends but maybe something based on the fact that they're drawn in the hover layer rather than the info layer?

how about allowing us to set the animation delay on the movement of tooltips. They are very choppy and not as smooth as other charting APIs, in which tooltips glide across the screen smoothly, rather than jumping.

I understand the appeal of a gliding effect, but it's probably not something we're going to build. From the standpoint of data interpretability, animation provides object constancy: "this shape moving or changing size represents the same entity, just evolving to a different view." But that's not what's happening at all with hover labels as you move your mouse around the plot. You leave one data point, so the information about that data point should disappear, and you arrive at another data point, so information about that data point should appear. This is also why we don't attach the hover label to the mouse cursor, only to the data points themselves: we're not giving info about the mouse cursor, we're giving info about the data point the cursor is nearest.

That said there are things we could do to soften the hover effects without tampering with the association between data value and label position. We could fade in and out, or shrink and grow, for example. If anyone is interested in making a PR to allow effects like this (or styling like border radius), the part of the code I link to above is probably where it goes - along with creating appropriate attributes, that will need to be fed in from traces or layouts similar to how colors are handled now.

@nicolaskruchten

@nicolaskruchten Is hoverlabel transparency already implemented? I tried it in plotly js but the transparency had no effect.

I manually added this CSS as a workaround to get 40% opacity on the hover box and 100% opacity for the hover text on my plot.

<style>.hovertext { fill-opacity: 0.4; stroke-opacity: 1; }</style>

@etpinard

Are there any news regarding hoverlabel.borderwidth attribute ?
As mentioned by @etpinard (in 2018), hoverlabel.bordercolor already exists, but we're unable to change the width...
Or is there any workaround for it ?
Thanks in advance for you help!

Is there any news about border radius ? or is there any workaround for it?

It would be good to be able to change the hoverlayer.hovertext.name. Currently we have to override via CSS:

.plotly .hoverlayer .hovertext .name {
  fill: black !important;
}

Hi!

This has also been something that has bothered me for years. I've opened a PR #8115 that partially addresses the need for more hover label customization.

It adds:

hoverlabel.borderwidth — sets the hover label border width
hoverlabel.borderradius — sets the hover label border radius
hoverlabel.borderpad — sets the padding between the text and the border
hoverlabel.namecolor — sets the secondary hover label text color
hoverlabel.bgnamecolor — sets the secondary hover label background color
hoverlabel.shadow — sets a drop shadow on the hover label

Feel free to share your thoughts on this!

Screenshots

using mock: https://github.com/plotly/plotly.js/blob/main/test/image/mocks/line_scatter.json

  "layout": {
    "hoverlabel": {
      "borderwidth": 5,
      "borderradius": 20,
      "namecolor": "red",
      "bgnamecolor": "yellow",
      "shadow": "0 10px 4px rgba(0, 0, 0, 0.2)",
      "borderpad": 15
    }
  }

Additional improvement

If hoverlabel.namecolor is not specified, the trace color is preserved when it has sufficient contrast against the secondary label background (WCAG 4.5:1). Otherwise, a contrasting text color is used automatically.

Before

After

Navigation Menu

Repository navigation

More hover label style customizations #2342

7 remaining items

Screenshots

Additional improvement

Before

After

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

More hover label style customizations #2342

Description

Activity

brianstamper commented on Apr 26, 2018

etpinard commented on Sep 25, 2018

etpinard commented on Sep 25, 2018

kristianmandrup commented on Oct 3, 2018

Braintelligence commented on Oct 27, 2018

antoinerg commented on Dec 5, 2018

alexcjohnson commented on Dec 5, 2018

Braintelligence commented on Jul 2, 2019

emmanuelle commented on Nov 14, 2019

alexcjohnson commented on Nov 14, 2019

mbkupfer commented on May 19, 2020

alexcjohnson commented on May 19, 2020

7 remaining items

vyaduvanshi commented on May 21, 2021

sebastianrosado commented on Jul 28, 2021

vyaduvanshi commented on Jul 29, 2021

zadamg commented on Sep 27, 2022

alexcjohnson commented on Sep 30, 2022

albertassi88 commented on Aug 11, 2023

wigginno commented on Jul 9, 2024

cartiery commented on Jun 9, 2025

rajakumar1012 commented on Aug 7, 2025

radove commented on Nov 24, 2025

Lexachoc commented on Oct 10, 2026

Screenshots

Additional improvement

Before

After

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions