Docs: Add another version of the 'Multiline Tooltip' exmaple which us…

…es the standard tooltip (vega#3340)

* Docs: Add another version of the 'Multiline Tooltip' exmaple which uses the standard tooltip

* Harmonize code style

tests/examples_arguments_syntax/multiline_tooltip.py

@@ -3,12 +3,9 @@
 ==================
 This example shows how you can use selections and layers to create a
 tooltip-like behavior tied to the x position of the cursor.
-If you are looking for more standard tooltips, it is recommended to use the
-tooltip encoding channel as shown in the
-`Scatter Plot With Tooltips <https://altair-viz.github.io/gallery/scatter_tooltips.html>`_
-example.
+If you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example.
 
-The following example employs a little trick to isolate the x-position of the
+In this example, we'll employ a little trick to isolate the x-position of the
 cursor: we add some transparent points with only an x encoding (no y encoding)
 and tie a *nearest* selection to these, tied to the "x" field.
 """
@@ -18,25 +15,28 @@
 import numpy as np
 
 np.random.seed(42)
-source = pd.DataFrame(np.cumsum(np.random.randn(100, 3), 0).round(2),
-                    columns=['A', 'B', 'C'], index=pd.RangeIndex(100, name='x'))
-source = source.reset_index().melt('x', var_name='category', value_name='y')
+columns = ["A", "B", "C"]
+source = pd.DataFrame(
+    np.cumsum(np.random.randn(100, 3), 0).round(2),
+    columns=columns, index=pd.RangeIndex(100, name="x")
+)
+source = source.reset_index().melt("x", var_name="category", value_name="y")
 
 # Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection_point(nearest=True, on='mouseover',
-                        fields=['x'], empty=False)
+nearest = alt.selection_point(nearest=True, on="mouseover",
+                              fields=["x"], empty=False)
 
 # The basic line
-line = alt.Chart(source).mark_line(interpolate='basis').encode(
-    x='x:Q',
-    y='y:Q',
-    color='category:N'
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
 )
 
 # Transparent selectors across the chart. This is what tells us
 # the x-value of the cursor
 selectors = alt.Chart(source).mark_point().encode(
-    x='x:Q',
+    x="x:Q",
     opacity=alt.value(0),
 ).add_params(
     nearest
@@ -48,13 +48,13 @@
 )
 
 # Draw text labels near the points, and highlight based on selection
-text = line.mark_text(align='left', dx=5, dy=-5).encode(
-    text=alt.condition(nearest, 'y:Q', alt.value(' '))
+text = line.mark_text(align="left", dx=5, dy=-5).encode(
+    text=alt.condition(nearest, "y:Q", alt.value(" "))
 )
 
 # Draw a rule at the location of the selection
-rules = alt.Chart(source).mark_rule(color='gray').encode(
-    x='x:Q',
+rules = alt.Chart(source).mark_rule(color="gray").encode(
+    x="x:Q",
 ).transform_filter(
     nearest
 )

tests/examples_arguments_syntax/multiline_tooltip_standard.py

@@ -0,0 +1,54 @@
+"""
+Multi-Line Tooltip (Standard)
+=============================
+This example shows how to add a standard tooltip to the same chart 
+as in :ref:`gallery_multiline_tooltip`. You can find another example
+using this approach in the documentation on the :ref:`user-guide-pivot-transform` transformation.
+"""
+# category: interactive charts
+import altair as alt
+import pandas as pd
+import numpy as np
+
+np.random.seed(42)
+columns = ["A", "B", "C"]
+source = pd.DataFrame(
+    np.cumsum(np.random.randn(100, 3), 0).round(2),
+    columns=columns, index=pd.RangeIndex(100, name="x"),
+)
+source = source.reset_index().melt("x", var_name="category", value_name="y")
+
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(nearest=True, on="mouseover", 
+                              fields=["x"], empty=False)
+
+# The basic line
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
+)
+
+# Draw points on the line, and highlight based on selection
+points = line.mark_point().encode(
+    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
+)
+
+# Draw a rule at the location of the selection
+rules = alt.Chart(source).transform_pivot(
+    "category",
+    value="y",
+    groupby=["x"]
+).mark_rule(color="gray").encode(
+    x="x:Q",
+    opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
+    tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
+).add_params(nearest)
+
+
+# Put the five layers into a chart and bind the data
+alt.layer(
+    line, points, rules
+).properties(
+    width=600, height=300
+)

tests/examples_methods_syntax/multiline_tooltip.py

@@ -3,12 +3,9 @@
 ==================
 This example shows how you can use selections and layers to create a
 tooltip-like behavior tied to the x position of the cursor.
-If you are looking for more standard tooltips, it is recommended to use the
-tooltip encoding channel as shown in the
-`Scatter Plot With Tooltips <https://altair-viz.github.io/gallery/scatter_tooltips.html>`_
-example.
+If you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example.
 
-The following example employs a little trick to isolate the x-position of the
+In this example, we'll employ a little trick to isolate the x-position of the
 cursor: we add some transparent points with only an x encoding (no y encoding)
 and tie a *nearest* selection to these, tied to the "x" field.
 """
@@ -18,27 +15,28 @@
 import numpy as np
 
 np.random.seed(42)
+columns = ["A", "B", "C"]
 source = pd.DataFrame(
     np.cumsum(np.random.randn(100, 3), 0).round(2),
-    columns=['A', 'B', 'C'], index=pd.RangeIndex(100, name='x')
+    columns=columns, index=pd.RangeIndex(100, name="x")
 )
-source = source.reset_index().melt('x', var_name='category', value_name='y')
+source = source.reset_index().melt("x", var_name="category", value_name="y")
 
 # Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection_point(nearest=True, on='mouseover',
-                        fields=['x'], empty=False)
+nearest = alt.selection_point(nearest=True, on="mouseover",
+                              fields=["x"], empty=False)
 
 # The basic line
-line = alt.Chart(source).mark_line(interpolate='basis').encode(
-    x='x:Q',
-    y='y:Q',
-    color='category:N'
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
 )
 
 # Transparent selectors across the chart. This is what tells us
 # the x-value of the cursor
 selectors = alt.Chart(source).mark_point().encode(
-    x='x:Q',
+    x="x:Q",
     opacity=alt.value(0),
 ).add_params(
     nearest
@@ -50,13 +48,13 @@
 )
 
 # Draw text labels near the points, and highlight based on selection
-text = line.mark_text(align='left', dx=5, dy=-5).encode(
-    text=alt.condition(nearest, 'y:Q', alt.value(' '))
+text = line.mark_text(align="left", dx=5, dy=-5).encode(
+    text=alt.condition(nearest, "y:Q", alt.value(" "))
 )
 
 # Draw a rule at the location of the selection
-rules = alt.Chart(source).mark_rule(color='gray').encode(
-    x='x:Q',
+rules = alt.Chart(source).mark_rule(color="gray").encode(
+    x="x:Q",
 ).transform_filter(
     nearest
 )

tests/examples_methods_syntax/multiline_tooltip_standard.py

@@ -0,0 +1,54 @@
+"""
+Multi-Line Tooltip (Standard)
+=============================
+This example shows how to add a standard tooltip to the same chart 
+as in :ref:`gallery_multiline_tooltip`. You can find another example
+using this approach in the documentation on the :ref:`user-guide-pivot-transform` transformation.
+"""
+# category: interactive charts
+import altair as alt
+import pandas as pd
+import numpy as np
+
+np.random.seed(42)
+columns = ["A", "B", "C"]
+source = pd.DataFrame(
+    np.cumsum(np.random.randn(100, 3), 0).round(2),
+    columns=columns, index=pd.RangeIndex(100, name="x"),
+)
+source = source.reset_index().melt("x", var_name="category", value_name="y")
+
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(nearest=True, on="mouseover", 
+                              fields=["x"], empty=False)
+
+# The basic line
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
+)
+
+# Draw points on the line, and highlight based on selection
+points = line.mark_point().encode(
+    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
+)
+
+# Draw a rule at the location of the selection
+rules = alt.Chart(source).transform_pivot(
+    "category",
+    value="y",
+    groupby=["x"]
+).mark_rule(color="gray").encode(
+    x="x:Q",
+    opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
+    tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
+).add_params(nearest)
+
+
+# Put the five layers into a chart and bind the data
+alt.layer(
+    line, points, rules
+).properties(
+    width=600, height=300
+)