Search with custom tooltip

Doyin Atobaru answered on March 21, 2025 Popularity 1/10 Helpfulness 1/10

answer Search with custom tooltip

related filament field must not be greater than 12288 kilobytes.

Search with custom tooltip

Comment

interface SearchProps {
  onSearch?: (term: string) => void;
  placeholder?: string;
  className?: string;
}

export function Search({ onSearch, placeholder = 'Search...', className }: SearchProps) {
  const [searchTerm, setSearchTerm] = React.useState('');
  const [showTooltip, setShowTooltip] = React.useState(false);


  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearchTerm(value);
    onSearch?.(value);
  };

  return (
    <div
      className={cn(
        'max-sm:hidden group relative flex items-center px-3 w-full rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
        className
      )}
    >
      <SearchIcon width={14} height={14} className="text-[#667185]" />

      <Input
        type="search"
        placeholder={placeholder}
        value={searchTerm}
        onChange={handleSearch}
        onFocus={() => setShowTooltip(true)}
        onBlur={() => setShowTooltip(false)}
        className="w-full rounded-md h-auto border-none bg-transparent py-2.5 text-sm ring-offset-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
      />

       {/* Tooltip */}
       {showTooltip && (
        <div className="absolute left-1/2 top-full mt-2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white text-xs px-3 py-1 rounded-md shadow-md">
          Press Enter to search
          <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full border-4 border-transparent border-b-gray-900"></div>
        </div>
      )}
    </div>
  );
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript search tooltip

Link to this answer
Share Copy Link

Contributed on Mar 27 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

filament field must not be greater than 12288 kilobytes.

Comment

Filament maybe using livewire, and this error comes from livewire


by default, Livewire will validate ALL temporary file uploads with the following rules: file|max:12288

If you wish to customize this, you can configure exactly what validate rules should run on all temporary file uploads inside config/livewire.php:

return [
    ...
    'temporary_file_upload' => [
        ...
        'rules' => 'file|mimes:png,jpg,pdf|max:102400', // (100MB max, and only pngs, jpegs, and pdfs.)
        ...
    ],
];

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: field whatever

Link to this answer
Share Copy Link

Contributed on Mar 21 2025

Samandar Abduraxmonov

0 Answers Avg Quality 2/10

Search with custom tooltip

Contents

More Related Answers

Search with custom tooltip

Closely Related Answers

filament field must not be greater than 12288 kilobytes.

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.