Re-size hover info box

📊 Plotly Python
1

Hi

Is it possible to re-size the hover info box? Currently I am using the hoverinfo = ‘name’ option and some of my longer trace names are being truncated when hovering.

Thanks

2 Likes
2

To display a longer text at hover, define a list of strings for each point, and set hoverinfo=‘text’.
See the example below:

import plotly.plotly as py
from plotly.graph_objs import *
X=[2, 3.154, 4]
Y=[5.07, 1,  3]
text=['a very long long text: '+'('+'{:.3f}'.format(X[k])+', '+'{:.3f}'.format(Y[k])+')' for k in range(len(X))]
data=Data([
      Scatter(x=X, 
                  y=Y, 
                 mode='markers', 
                 marker=dict(size=8), 
                 name='',
                 text=text, 
                hoverinfo='text')])
 layout=Layout(width=600, 
                       height=600, 
                       showlegend=False,
                       hovermode='closest')
 fig=Figure(data=data, layout=layout)
3

Hi empet

Thank you for the reply

However, I am already using the text parameter to display other values.

i.e. I have bubbles with ‘markers+text’ with the ‘text’ parameter showing a value annotated on the bubble, and want to use the trace ‘name’ parameter to label each bubble as I show in the graph below.

https://plot.ly/~starhammer/1267/upremier-league-uchampionship-uleague-1-uleague-2-unational-league-unational-lea/

One solution would be to use annotations rather than ‘markers+text’ to overlay to bubble values on the bubbles. This would free up the ‘text’ parameter for the bubble label as you suggested. But I wanted to avoid that and see if the hover info box could be increased in size.

Thanks
David

1 Like
4

Hi David,

I have the same issue. I would like to know if you found a go around hack for this.

Thanks,
Mounika

1 Like
5

Guys, is there a resolution for long text hover values being wrapped ? This has become a gating item for my work now. :frowning:

6

Hi , do we have any more help on this issue ?

7

@Vivekanand You can insert a few lines of text for each trace. Hover the mouse on the tree leafs in this plot:
https://plot.ly/~empet/14679

This is the code for setting up the text to be displayed on hover over leafs:

text=[clade.name   for clade in tree.find_clades(order='level')]
for k, strain in enumerate(df['Strain']):
    i=text.index(strain)
    text[i]=text[i]+'<br>Country: '+'{:s}'.format(df.loc[k, 'Country'])+'<br>Region: '+'{:s}'.format(df.loc[k, 'Region'])+\
    '<br>Collection date: '+'{:s}'.format(df.loc[k,'Date'])+\
    '<br>Journal: '+'{:s}'.format(df.loc[k, 'Journal'])+'<br>Authors: '+'{:s}'.format(df.loc[k, 'Authors'])

Hence using the html <br> tag you can insert as many lines of text as you want.

Moreover, now you can set in a trace:

 hoverinfo= "name+x+text"

or “name+x+y+text”, etc

8

@empet , thanks a lot for the reply. From your original comments, I had already figured out the (“br”) trick to show multiple lines in the hover box. Thanks for that :slight_smile: But because of the nature of data, I have really long texts to be displayed, and the hover box is truncating some parts of the lines, I checked in the plot you suggested and I was able to find a similar data point with similar behaviors, Also we can see that the hover box is masking the datapoint itself,. So is there a way to handle the size of the hover box explicitly and to control the transparency of the box. Please find snapshot of the plot attached .

hover_long_text
hover_long_text.PNG986×458 40.3 KB

1 Like
9

@Vivekanand
You could split a too long string, testing before including it in the text list whether its length is greater than some threshold. If it is, then split it into two strings, inserting a <br> tag at the nearest white space to the half of the initial string.

To set the transparency of the hover label box, insert the key hoverlabel in the definition of a trace:

   trace=dict(type='scatter',
              x=x, y=y,
              mode='markers',
              marker=dict(size=4, color='rgb(188, 20, 26)'),
              text=['aaaaaaaa', 'bbbbbbbbb'],
              hoverlabel=dict(bgcolor='rgba(188, 20, 26, 0.5)'),
              hoverinfo='text')
10

Is there any way that you can help me with my hover text on my atlas map. The text is way too long and won’t wrap. If I can get it on multiple lines the viewer could read it. But I am not technically savvy and have no idea how to solve the problem. If you could help, I would be extremely appreciative. My map is:

https://plot.ly/~ericmmas/57/

Thanks so much!!!

11

try using using hoverlabel = dict(namelength = -1) instead

example:

line = dict(type='scatter',
                x = x_vector,
                y = y_vector,
                mode = 'lines+markers',
                name = base.columns[i],
                hoverlabel = dict(namelength = -1)
               )

59

4 Likes
12

like mpfig posted, this solves it for me:

hoverlabel = dict(namelength = -1)

2 Likes