diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png
new file mode 100644
index 0000000000..f2b24acd35
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png
new file mode 100644
index 0000000000..d1aa5944e5
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png differ
diff --git a/blazor/chart/strip-line.md b/blazor/chart/strip-line.md
index 0f7a4009d3..7c05b4dc42 100644
--- a/blazor/chart/strip-line.md
+++ b/blazor/chart/strip-line.md
@@ -248,6 +248,192 @@ To create a stripline in a specific region with respect to a segment (segmented
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png)" %}
+## Stripline tooltip
+
+Stripline tooltips provide additional contextual information on interaction with striplines in the chart. To display a tooltip on a stripline, add the **ChartStriplineTooltip** component inside the desired **ChartStripline** and set the **Enable** property to **true**. It is particularly useful for explaining the significance of specific ranges or thresholds marked by striplines.
+
+### Default stripline tooltip code example:
+
+Below is the simplest way to enable a stripline tooltip using default settings. The tooltip will display on interaction with the stripline.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display vehicle traffic by time using a Spline series. *@
+
+
+
+
+ @* Stripline: visual band marking Rush Hour on the X axis *@
+
+
+ @* Stripline Tooltip: shows 'Rush Hour' with band hover/tap *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class TrafficPoint
+ {
+ public DateTime Time { get; set; }
+ public double Vehicles { get; set; }
+ }
+
+ public List Traffic = new ()
+ {
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 06, 00, 00), Vehicles = 380 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 07, 00, 00), Vehicles = 820 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 08, 00, 00), Vehicles = 1200 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 09, 00, 00), Vehicles = 980 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 10, 00, 00), Vehicles = 650 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 11, 00, 00), Vehicles = 520 }
+ };
+}
+
+```
+
+
+
+### Tooltip customization properties
+
+The stripline tooltip offers comprehensive customization options through the following properties:
+
+- **Enable** - A boolean property that enables or disables the stripline tooltip. Default value is **false**.
+
+- **Header** - Defines the title text displayed at the top of the tooltip.
+
+- **Content** - Allows you to specify custom content for the tooltip body using a format string. The format supports token placeholders that are replaced with corresponding values at runtime. Supported tokens:
+ - **${stripline.text}** – The stripline label.
+ - **${stripline.start}** – The stripline start value.
+ - **${stripline.end}** – The stripline end value.
+ - **${axis.name}** – The axis name.
+ - **${stripline.segmentStart}** – The stripline segment start value (if applicable).
+ - **${stripline.segmentEnd}** – The stripline segment end value (if applicable).
+ - **${stripline.segmentAxisName}** – The stripline segment axis name (if applicable).
+ - **${stripline.size}** – The stripline size (if applicable).
+
+- **Fill** - Sets the background color of the tooltip. Accepts any valid CSS color value (hex, rgb, rgba, named colors).
+
+- **Opacity** - Controls the transparency level of the tooltip background. Accepts numeric values between 0 (completely transparent) and 1 (completely opaque). The default value is 0.75.
+
+- **ShowHeaderLine** - A boolean property that controls the visibility of the horizontal separator line between the tooltip header and content. Set to **true** to display the line or **false** to hide it.
+
+The **ChartStriplineTooltipTextStyle** component allows you to customize the appearance of text within the tooltip:
+
+- **Size** - Specifies the font size of the tooltip text. Accepts pixel values (e.g., "12px").
+
+- **Color** - Defines the text color. Accepts any valid CSS color value.
+
+- **FontFamily** - Sets the font family for the tooltip text. Accepts standard CSS font family values (e.g., "Arial", "Segoe UI", "Roboto").
+
+- **FontWeight** - Controls the thickness of the text.
+
+The **ChartStriplineTooltipBorder** component enables you to add and customize borders around the tooltip:
+
+- **Width** - Specifies the thickness of the tooltip border in pixels. Accepts numeric values. Default value is **0**.
+
+- **Color** - Defines the color of the tooltip border. Accepts any valid CSS color value.
+
+### Customized stripline tooltip code example:
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display department revenue by quarter using Column and Spline series. *@
+
+
+
+
+
+
+
+
+
+
+ @* Stripline: Highlights the upper revenue target range from 95k to 110k with text style and border customization. *@
+
+
+
+
+ @* Stripline Tooltip: providing interactive context with customizatioon for the target bands over hover/tap *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class RevenuePoint
+ {
+ public string Quarter { get; set; }
+ public double Revenue { get; set; }
+ }
+
+ public List SalesData = new ()
+ {
+ new RevenuePoint { Quarter = "Q1", Revenue = 78 },
+ new RevenuePoint { Quarter = "Q2", Revenue = 88 },
+ new RevenuePoint { Quarter = "Q3", Revenue = 99 },
+ new RevenuePoint { Quarter = "Q4", Revenue = 92 }
+ };
+
+ public List SupportData = new ()
+ {
+ new RevenuePoint { Quarter = "Q1", Revenue = 70 },
+ new RevenuePoint { Quarter = "Q2", Revenue = 83 },
+ new RevenuePoint { Quarter = "Q3", Revenue = 90 },
+ new RevenuePoint { Quarter = "Q4", Revenue = 85 }
+ };
+}
+
+```
+
+
+
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
## See also