message: feat(explore): add tooltip to timepicker label
diff: @@ -37,6 +37,7 @@ import Popover from 'src/common/components/Popover';
  import { Divider } from 'src/common/components';
  import Icon from 'src/components/Icon';
  import { Select } from 'src/components/Select';
  +import { Tooltip } from 'src/common/components/Tooltip';
  import { SelectOptionType, FrameType } from './types';
  import {
  COMMON_RANGE_VALUES_SET,
  @@ -181,8 +182,26 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
  const [timeRangeValue, setTimeRangeValue] = useState(value);
  const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
  const [evalResponse, setEvalResponse] = useState<string>(value);
  + const [tooltipTitle, setTooltipTitle] = useState<string>(value);
  useEffect(() => {
  + fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => {
  + if (error) {
  + setEvalResponse(error || '');
  + setValidTimeRange(false);
  + setTooltipTitle(value || '');
  + } else {
  + /*
  + HRT == human readable text
  + ADR == actual datetime range
  + +--------------+------+----------+--------+----------+-----------+
  + | | Last | Previous | Custom | Advanced | No Filter |
  + +--------------+------+----------+--------+----------+-----------+
  + | control pill | HRT | HRT | ADR | ADR | ADR |
  + +--------------+------+----------+--------+----------+-----------+
  + | tooltip | ADR | ADR | HRT | HRT | HRT |
  + +--------------+------+----------+--------+----------+-----------+
  + */
  const valueToLower = value.toLowerCase();
  if (
  valueToLower.startsWith('last') ||
  @@ -190,18 +209,14 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
  valueToLower.startsWith('previous')
  ) {
  setActualTimeRange(value);
  - setValidTimeRange(true);
  + setTooltipTitle(actualRange || '');
  } else {
  - fetchTimeRange(value, endpoints).then(({ value, error }) => {
  - if (error) {
  - setEvalResponse(error || '');
  - setValidTimeRange(false);
  - } else {
  - setActualTimeRange(value || '');
  + setActualTimeRange(actualRange || '');
  + setTooltipTitle(value || '');
  + }
  setValidTimeRange(true);
  }
  });
  - }
  }, [value]);
  useEffect(() => {
  @@ -327,6 +342,7 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
  onVisibleChange={togglePopover}
  overlayStyle={overlayStyle}
  >
  + <Tooltip placement="top" title={tooltipTitle}>
  <Label
  className="pointer"
  data-test="time-range-trigger"
  @@ -334,6 +350,7 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
  >
  {actualTimeRange}
  </Label>
  + </Tooltip>
  </StyledPopover>
  </>
  );
  