diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md
index eb13af0e654..50befc860f0 100644
--- a/doc/python/hover-text-and-formatting.md
+++ b/doc/python/hover-text-and-formatting.md
@@ -283,6 +283,58 @@ print("user_defined hovertemplate:", fig.data[0].hovertemplate)
fig.show()
```
+### Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate
+
+This example adds custom fields to a Plotly Express figure using the custom_data parameter and then adds a hover template that applies d3 formats to each element of the customdata[n] array and uses HTML to customize the fonts and spacing.
+
+```python
+# %%
+import plotly.graph_objects as go
+import plotly.express as px
+import pandas as pd
+import math
+import numpy as np
+
+data = px.data.gapminder()
+df = data[data['year']==2007]
+df = df.sort_values(['continent', 'country'])
+
+df.rename(columns={"gdpPercap":'GDP per capita', "lifeExp":'Life Expectancy (years)'}, inplace=True)
+
+fig=px.scatter(df,
+ x='GDP per capita',
+ y='Life Expectancy (years)',
+ color='continent',
+ size=np.sqrt(df['pop']),
+ # Specifying data to make available to the hovertemplate
+ # The px custom_data parameter has an underscore, while the analogous graph objects customdata parameter has no underscore.
+ # The px custom_data parameter is a list of column names in the data frame, while the graph objects customdata parameter expects a data frame or a numpy array.
+ custom_data=['country', 'continent', 'pop'],
+)
+
+# Plotly express does not have a hovertemplate parameter in the graph creation function, so we apply the template with update_traces
+fig.update_traces(
+ hovertemplate =
+ "%{customdata[0]}
" +
+ "%{customdata[1]}
" +
+ "GDP per Capita: %{x:$,.0f}
" +
+ "Life Expectation: %{y:.0f}
" +
+ "Population: %{customdata[2]:,.0f}" +
+ "",
+ mode='markers',
+ marker={'sizemode':'area',
+ 'sizeref':10},
+)
+
+fig.update_layout(
+ xaxis={
+ 'type':'log'},
+ )
+
+fig.show()
+```
+
+
### Hover Templates with Mixtures of Period data
*New in v5.0*
@@ -319,7 +371,7 @@ fig.show()
### Advanced Hover Template
-The following example shows how to format a hover template.
+This produces the same graphic as in "Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate" above, but does so with the `customdata` and `text` parameters of `graph_objects`. It shows how to specify columns from a dataframe to include in the customdata array using the df[["col_i", "col_j"]] subsetting notation. It then references those variables using e.g. %{customdata[0]} in the hovertemplate. It includes comments about major differences between the parameters used by `graph_objects` and `plotly.express`.
```python
import plotly.graph_objects as go
@@ -343,21 +395,31 @@ continent_data = {continent:df_2007.query("continent == '%s'" %continent)
fig = go.Figure()
-for continent_name, continent in continent_data.items():
- fig.add_trace(go.Scatter(
- x=continent['gdpPercap'],
- y=continent['lifeExp'],
- name=continent_name,
- text=continent['continent'],
- hovertemplate=
- "%{text}
" +
- "GDP per Capita: %{x:$,.0f}
" +
- "Life Expectation: %{y:.0%}
" +
- "Population: %{marker.size:,}" +
- "",
- marker_size=continent['size'],
+for continent_name, df in continent_data.items():
+ fig.add_trace(
+ go.Scatter(
+ x=df['gdpPercap'],
+ y=df['lifeExp'],
+ marker_size=df['size'],
+ name=continent_name,
+
+ # The next three parameters specify the hover text
+ # Text supports just one customized field per trace
+ # and is implemented here with text=df['continent'],
+ # Custom data supports multiple fields through numeric indices in the hovertemplate
+ # In we weren't using the text parameter in our example,
+ # we could instead add continent as a third customdata field.
+ customdata=df[['country','pop']],
+ hovertemplate=
+ "%{customdata[0]}
" +
+ "%{text}
" +
+ "GDP per Capita: %{x:$,.0f}
" +
+ "Life Expectancy: %{y:.0f}
" +
+ "Population: %{customdata[1]:,.0f}" +
+ "",
))
+
fig.update_traces(
mode='markers',
marker={'sizemode':'area',