# Tooltip in Flutter Range Slider (SfRangeSlider)

This section explains how to add tooltips to the Flutter Range Slider.

## Enable tooltips

You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html) property. It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html).

I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the range slider thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html) behavior.

### Horizontal

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 6.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 10.0,
      interval: 2,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range Slider tooltip support](images/tooltip/show-tooltip.png)

### Vertical

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 6.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 10.0,
      interval: 2,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range slider tooltip support](images/tooltip/vertical-show-tooltip.png)

N>
* Refer the [`tooltipTextFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipTextFormatterCallback.html) for changing the default tooltip text.
* Refer the [`SfRangeSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData-class.html) for customizing the appearance of the tooltip text.

## Tooltip shape

You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipShape.html) property is [`SfRectangularTooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRectangularTooltipShape-class.html).

N> The paddle tooltip shape is not applicable for vertical orientation of the range sliders.

### Horizontal

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(40.0, 60.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 100.0,
      interval: 20,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      tooltipShape: const SfPaddleTooltipShape(),
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range Slider tooltip shape](images/tooltip/range-tooltip-shape.png)

## Tooltip position

N> This is only applicable for vertical orientation of the range sliders.

You can show tooltip in left or right positions using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderTooltipPosition.html) property. The default value of the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderTooltipPosition.html) property is `SliderTooltipPosition.left`.

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(40.0, 60.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 100.0,
      interval: 20,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      tooltipPosition: SliderTooltipPosition.right,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range Slider tooltip shape](images/tooltip/range-right-tooltip-shape.png)

## Tooltip text format

By default it is formatted based on [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) property and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) property based on whether it is date type [`SfRangeSlider`](https://help.syncfusion.com/flutter/range-slider/getting-started#set-date-range) or numeric [`SfRangeSlider`](https://help.syncfusion.com/flutter/range-slider/getting-started#set-numeric-range).

You can format or change the whole tooltip label text using the [`tooltipTextFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipTextFormatterCallback.html). Its arguments are,

* actualValue – either `DateTime` or `double` based on given [`values`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/values.html).
* formattedText – If the actual value is `double`, it is formatted by [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html).

### Horizontal

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = SfRangeValues(
      DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: DateTime(2010, 01, 01, 9, 00, 00),
      max: DateTime(2010, 01, 01, 21, 05, 00),
      values: _values,
      interval: 3,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      dateFormat: DateFormat('h:mm'),
      dateIntervalType: DateIntervalType.hours,
      tooltipTextFormatterCallback:
          (dynamic actualValue, String formattedText) {
        return DateFormat('h:mm a').format(actualValue);
      },
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip formatter support](images/tooltip/tooltip-formatter.png)

### Vertical

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = SfRangeValues(
      DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: DateTime(2010, 01, 01, 9, 00, 00),
      max: DateTime(2010, 01, 01, 21, 05, 00),
      values: _values,
      interval: 3,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      dateFormat: DateFormat('h:mm'),
      dateIntervalType: DateIntervalType.hours,
      tooltipTextFormatterCallback:
          (dynamic actualValue, String formattedText) {
        return DateFormat('h:mm a').format(actualValue);
      },
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip formatter support](images/tooltip/vertical-tooltip-formatter.png)

## Tooltip color

You can change the background color of the tooltip in the Flutter Range Slider using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipBackgroundColor.html) property.

N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the remaining code examples in this section that use `SfRangeSliderThemeData`.

### Horizontal

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipBackgroundColor: Colors.red[300],
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip color support](images/tooltip/slider-tooltip-color.png)

### Vertical

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipBackgroundColor: Colors.red[300],
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip color support](images/tooltip/vertical-slider-tooltip-color.png)

## Tooltip label style

You can change the appearance of the tooltip text in the Flutter Range Slider using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipTextStyle.html) property.

### Horizontal

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipTextStyle: const TextStyle(
            color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic),
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip style support](images/tooltip/slider-tooltip-style.png)

### Vertical

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipTextStyle: const TextStyle(
            color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic),
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip style support](images/tooltip/vertical-slider-tooltip-style.png)

## Tooltip overlap stroke color

You can change the overlap stroke color of the tooltip in the Flutter Range Slider using the [`overlappingTooltipStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlappingTooltipStrokeColor.html) property.

### Horizontal

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlappingTooltipStrokeColor: Colors.white,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip overlap support](images/tooltip/slider-tooltip-overlap.png)

### Vertical

{% tabs %}
{% highlight Dart %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlappingTooltipStrokeColor: Colors.white,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Tooltip overlap support](images/tooltip/vertical-slider-tooltip-overlap.png)