Show tooltip on tap for touch devices

Except tooltips on buttons
This commit is contained in:
Sinclair Chen 2022-08-11 19:32:38 -07:00
parent 4cfc6cd6e7
commit 4e80038997
4 changed files with 30 additions and 16 deletions

View File

@ -12,11 +12,16 @@ export function DateTimeTooltip(props: {
time: number time: number
text?: string text?: string
children?: React.ReactNode children?: React.ReactNode
noTap?: boolean
}) { }) {
const { time, text } = props const { time, text, noTap } = props
const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z') const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
const toolTip = text ? `${text} ${formattedTime}` : formattedTime const toolTip = text ? `${text} ${formattedTime}` : formattedTime
return <Tooltip text={toolTip}>{props.children}</Tooltip> return (
<Tooltip text={toolTip} noTap={noTap}>
{props.children}
</Tooltip>
)
} }

View File

@ -30,7 +30,7 @@ export function CopyLinkDateTimeComponent(props: {
} }
return ( return (
<div className={clsx('inline', className)}> <div className={clsx('inline', className)}>
<DateTimeTooltip time={createdTime}> <DateTimeTooltip time={createdTime} noTap>
<Link href={`/${prefix}/${slug}#${elementId}`} passHref={true}> <Link href={`/${prefix}/${slug}#${elementId}`} passHref={true}>
<a <a
onClick={(event) => copyLinkToComment(event)} onClick={(event) => copyLinkToComment(event)}

View File

@ -106,6 +106,7 @@ function DownTip(props: { onClick?: () => void }) {
className="h-6 w-6" className="h-6 w-6"
placement="bottom" placement="bottom"
text={onClick && `-${formatMoney(5)}`} text={onClick && `-${formatMoney(5)}`}
noTap
> >
<button <button
className="hover:text-red-600 disabled:text-gray-300" className="hover:text-red-600 disabled:text-gray-300"
@ -126,6 +127,7 @@ function UpTip(props: { onClick?: () => void; value: number }) {
className="h-6 w-6" className="h-6 w-6"
placement="bottom" placement="bottom"
text={onClick && `Tip ${formatMoney(5)}`} text={onClick && `Tip ${formatMoney(5)}`}
noTap
> >
<button <button
className="hover:text-primary disabled:text-gray-300" className="hover:text-primary disabled:text-gray-300"

View File

@ -17,21 +17,23 @@ export function Tooltip(props: {
children: ReactNode children: ReactNode
className?: string className?: string
placement?: Placement placement?: Placement
noTap?: boolean
}) { }) {
const { text, children, className, placement = 'top' } = props const { text, children, className, placement = 'top', noTap } = props
const arrowRef = useRef(null) const arrowRef = useRef(null)
const { x, y, reference, floating, strategy, middlewareData } = useFloating({ const { x, y, refs, reference, floating, strategy, middlewareData } =
whileElementsMounted: autoUpdate, useFloating({
placement, whileElementsMounted: autoUpdate,
middleware: [ placement,
offset(8), middleware: [
flip(), offset(8),
shift({ padding: 4 }), flip(),
arrow({ element: arrowRef }), shift({ padding: 4 }),
], arrow({ element: arrowRef }),
}) ],
})
const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {} const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {}
@ -45,14 +47,19 @@ export function Tooltip(props: {
return text ? ( return text ? (
<> <>
<div className={clsx('peer inline-block', className)} ref={reference}> <div
className={clsx('peer inline-block', className)}
ref={reference}
tabIndex={noTap ? undefined : 0}
onTouchStart={() => (refs.reference.current as HTMLElement).focus()}
>
{children} {children}
</div> </div>
<div <div
role="tooltip" role="tooltip"
ref={floating} ref={floating}
style={{ position: strategy, top: y ?? 0, left: x ?? 0 }} style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
className="z-10 max-w-xs rounded bg-slate-700 px-2 py-1 text-center text-sm text-white opacity-0 transition-opacity peer-hover:opacity-100" className="z-10 max-w-xs rounded bg-slate-700 px-2 py-1 text-center text-sm text-white opacity-0 transition-opacity peer-hover:opacity-100 peer-focus:opacity-100"
> >
{text} {text}
<div <div