Hello Guys,
I’m wondering whether we can add a tooltip for Y-axis title to show complete text only when hover in Subplot?
For Example, I have Subplot with three rows and one column and I want to show large length of text for each subplot vertically but doing that text is colliding with each other.
Hey @saurabh31, welcome to community.
I couldn’t see anything about axes title tooltip. So I created a custom approach.
import plotly.graph_objects as go
from plotly.subplots import make_subplots
fig = make_subplots(rows=3, cols=1)
#Trace1
fig.append_trace(go.Scatter(
x=[3.5, 4.5],
y=[1.75, 2.75],
mode='markers'),row=1, col=1)
#Trace1 Fake Y Axis
fig.add_trace(go.Scatter(
x=[0,0,0.01,0.01,0],
y=[0,3.5,3.5,0,0],
fill="toself",
mode='lines',
fillcolor='black',
line=dict(color="black",width=0.1),
text='My Custom Text 11111111111111',
opacity=1), row=1, col=1)
#Trace2
fig.append_trace(go.Scatter(
x=[1.5, 4.5],
y=[0.75, 0.75],
mode='markers'),row=2, col=1)
#Trace2 Fake Y Axis
fig.add_trace(go.Scatter(
x=[0,0,0.01,0.01,0],
y=[0,3.5,3.5,0,0],
fill="toself",
mode='lines',
fillcolor='black',
line=dict(color="black",width=0.1),
text='My Custom Text 22222222222222',
opacity=1), row=2, col=1)
#Trace3
fig.append_trace(go.Scatter(
x=[1.5, 4.5],
y=[0.75, 3.75],
mode='markers'),row=3, col=1)
#Trace3 Fake Y Axis
fig.add_trace(go.Scatter(
x=[0,0,0.01,0.01,0],
y=[0,3.5,3.5,0,0],
fill="toself",
mode='lines',
fillcolor='black',
line=dict(color="black",width=0.1),
text='My Custom Text 33333333333333',
opacity=0), row=3, col=1) # You can make it invisible (opacity=0). Hover on still shows text.
fig.update_xaxes(range=[0, 7], showgrid=True)
fig.update_yaxes(range=[0, 3.5])
fig.show()
Hope that helps.
Have a nice day.
Hey @akroma,
Thank you for response. Solution is very good, but I cannot add another trace in my graphs. What I want is hide and show title as I hover over title or show full text when I click on title, something like ellipsis with ‘…’ as a button.
Thank You.
Maybe something like this ? 
Actually you gave me the idea : )
I created a button and used callback function to change the title but you have to tweak some css properties.
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
fig = make_subplots(rows=3, cols=1)
#Trace1
fig.append_trace(go.Scatter(
x=[3.5, 4.5],
y=[1.75, 2.75],
mode='markers'),row=1, col=1)
#Trace2
fig.append_trace(go.Scatter(
x=[1.5, 4.5],
y=[0.75, 0.75],
mode='markers'),row=2, col=1)
#Trace3
fig.append_trace(go.Scatter(
x=[1.5, 4.5],
y=[0.75, 3.75],
mode='markers'),row=3, col=1)
fig.update_layout(width=800, height=800, margin=dict(l=0, r=0, t=0, b=0))
fig.update_xaxes(range=[0, 7], showgrid=True)
fig.update_yaxes(range=[0, 3.5])
#Button CSS properties
my_style={"height": "25px",
"width":"155px",
"margin-top": "180px",
"margin-left": "0px",
"transform": "rotate(-90deg)",
"background-color":"white", #hide button
"border":"none" #hide button
}
app = dash.Dash(__name__)
app.layout = html.Div([
#BUTTON
html.Div([
html.Button('Y Axis ...', id='y_axis_1', n_clicks=0, style=my_style)
]),
#GRAPH
html.Div([dcc.Graph(figure=fig,id="my_figure")],
style={'margin-left':'100px','margin-top':'-100px',}
)
])
@app.callback(Output('y_axis_1', 'children'),
Input('y_axis_1', 'n_clicks')
)
def change_button_style(n_clicks):
if n_clicks%2 == 0:
return "Short Title ..."
else:
return "Y-axis Long Title"
if __name__ == "__main__":
app.run_server(debug=True)