Date Range selection interfaces often feel clunky and overwhelming. While working on a dashboard, I needed a way to let users know what date range they are looking for, without any additional clicks. I created this simple date range selector with intuitive tooltips that preview the selected date range. The component adapts smoothly across different screen sizes and maintains its visual clarity whether you're selecting yesterday's data or looking at a 6-month trend.

Implementation Details

import { DateTooltip } from '@/components/DateTooltip';
 
export default function YourPage() {
  return (
    <DateTooltip 
      defaultValue="3M"
      onChange={(period) => console.log('Selected period:', period)}
    />
  );
}