Tooltip data in striplot with color option does not match

Dear all:
I noticed an interesting behavior using strip plot and the color option.

Depending on if I am using the color option or not, the tooltip output changes.
In more detail, I am creating a dcc tooltip and the original tooltip info is also displayed.
If color is not specified, the two tooltip outputs agree and also agree with the strip plot x-axis.
If color option is specifed, the dcc tooltip output changes, the other tooltip is still correct.

Below is my mock example. Please note the color option is specified.

Does anybody know what is going on?


from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import as px

import pandas as pd

df = pd.DataFrame({
   'value': [1,5,4,7,8,2,3,9,5,6]

df['Label'] = 'item'
df = df.sort_values(by=['Label'],axis=0,kind='stable').reset_index()
df['group'] = df['value'] > 5

app = Dash(__name__)

fig1 = go.Figure(
               df[df['Label'] == 'item'],
               color = 'group',  

fig1 = fig1.update_traces(offsetgroup="1")

   Output("graph-tooltip", "show"),
   Output("graph-tooltip", "bbox"),
   Output("graph-tooltip", "children"),
   Output("graph-tooltip", "direction"),
   Input("Stripplot", "hoverData"),

def display_hover(hoverData):
   if hoverData is None:
       return False, None, None, None

   pt = hoverData["points"][0]
   bbox = pt["bbox"]
   num = pt["pointNumber"]

   df_row = df.iloc[num]
   value = df_row['value']
   children = [
           html.H4(f"value: {value}", style={ "overflow-wrap": "break-word"}),
       ], style={'width': '210px', 'white-space': 'normal'})

   return True, bbox, children, 'left'


Not knowing how I can edit my posted question (is this possible?) I would like to add this piece of script which I forgot to include:

app.layout = dbc.Container([
        html.H1("Simplified Version"),
            dbc.Col(dcc.Graph(id="Stripplot",figure=fig1, clear_on_unhover=True,
                style={'width': '1200px', 'height': '500px','verticalAlign':'center'})),
        ], justify='right',
    ], fluid=True)