Make editor tooltips not animate

This commit is contained in:
Sinclair Chen 2022-08-31 20:17:42 -07:00
parent b38ea281cc
commit f0efb98e67
2 changed files with 8 additions and 7 deletions

View File

@ -166,7 +166,7 @@ export function TextEditor(props: {
<EditorContent editor={editor} />
{/* Toolbar, with buttons for images and embeds */}
<div className="flex h-9 items-center gap-5 pl-4 pr-1">
<Tooltip className="flex items-center" text="Add image" noTap>
<Tooltip text="Add image" noTap noFade>
<FileUploadButton
onFiles={upload.mutate}
className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
@ -174,7 +174,7 @@ export function TextEditor(props: {
<PhotographIcon className="h-5 w-5" aria-hidden="true" />
</FileUploadButton>
</Tooltip>
<Tooltip className="flex items-center" text="Add embed" noTap>
<Tooltip text="Add embed" noTap noFade>
<button
type="button"
onClick={() => setIframeOpen(true)}
@ -188,7 +188,7 @@ export function TextEditor(props: {
<CodeIcon className="h-5 w-5" aria-hidden="true" />
</button>
</Tooltip>
<Tooltip className="flex items-center" text="Add market" noTap>
<Tooltip text="Add market" noTap noFade>
<button
type="button"
onClick={() => setMarketOpen(true)}

View File

@ -21,8 +21,9 @@ export function Tooltip(props: {
className?: string
placement?: Placement
noTap?: boolean
noFade?: boolean
}) {
const { text, children, className, placement = 'top', noTap } = props
const { text, children, className, placement = 'top', noTap, noFade } = props
const arrowRef = useRef(null)
@ -64,10 +65,10 @@ export function Tooltip(props: {
{/* conditionally render tooltip and fade in/out */}
<Transition
show={open}
enter="transition ease-out duration-200"
enter="transition ease-out duration-50"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition ease-in duration-150"
leave={noFade ? '' : 'transition ease-in duration-150'}
leaveFrom="opacity-100"
leaveTo="opacity-0"
// div attributes