# code-snippets/3.10.2/js/components/common/TooltipButton.tsx

Code Snippets, version 3.10.2. 33 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/TooltipButton.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.2/raw/js/components/common/TooltipButton.tsx
- Modified: 2026-08-04T13:35:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/TooltipButton.tsx#L10-L20`.

```tsx
import classnames from 'classnames'
import React from 'react'
import { Button } from './Button'
import type { ReactNode } from 'react'
import type { ButtonProps } from './Button'

export interface TooltipButtonProps extends ButtonProps {
	tooltip: ReactNode
	block?: boolean
	inline?: boolean
	start?: boolean
	end?: boolean
	containerClassName?: string
}

export const TooltipButton: React.FC<TooltipButtonProps> = ({
	block, inline, start, end,
	tooltip,
	disabled,
	children,
	containerClassName,
	...buttonProps
}) =>
	<div className={classnames(
		containerClassName,
		!disabled && { 'tooltip-block': block, 'tooltip-inline': inline, 'tooltip-start': start, 'tooltip-end': end }
	)}>
		<Button {...buttonProps} disabled={disabled}>
			{children}
			{!disabled && <div role="tooltip" className="tooltip-content">{tooltip}</div>}
		</Button>
	</div>

```