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:

Would love to see an update for this

See also #5036 and linked issues and community forum posts.

These are all great ideas but they're not on anyone's roadmap at the moment as far as I know. That said, we as maintainers would be happy to help someone from the community to implement them, or to accept sponsorship to get them on to our short-term roadmap :)

It would be nice if there were an API to customize the overall hover label shape (and optionally remove this pointy thing):

There are some nice, thoughtful examples of alternative hover label shapes from other popular charting libraries in #5036

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
Tests for this feature
Long-term support (continued support of this feature in the latest version of Plotly.js)
Documentation at plotly.com/javascript
Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
Possibility of integrating this feature with Dash
Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

It would be nice if you could tell the tooltip to appear above or below the mouse. Currently it only appears to the left or right and is automatic depending on where you are on the chart. Unless I missed something.

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

Screenshots

Additional improvement

Before

After

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

More hover label style customizations #2342

Description

Activity

chidifrank commented on Aug 16, 2020

nicolaskruchten commented on Aug 24, 2020

nicolaskruchten commented on Aug 24, 2020

jackparmer commented on Aug 28, 2020

jackparmer commented on Sep 10, 2020

pdfabbro commented on Sep 17, 2020

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