feat: redesign tooltips

app/routes/dns/dialogs/nameserver.tsx

@@ -1,6 +1,7 @@
 import { RepoForkedIcon } from '@primer/octicons-react';
 import { useState } from 'react';
 import { useSubmit } from 'react-router';
+import Chip from '~/components/Chip';
 
 import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
@@ -82,16 +83,11 @@ export default function AddNameserver({ nameservers }: Props) {
 								Restrict to domain
 							</Dialog.Text>
 							<Tooltip>
-								<Tooltip.Button
-									className={cn(
-										'text-xs rounded-md px-1.5 py-0.5',
-										'bg-ui-200 dark:bg-ui-800',
-										'text-ui-600 dark:text-ui-300',
-									)}
-								>
-									<RepoForkedIcon className="w-4 h-4 mr-0.5" />
-									Split DNS
-								</Tooltip.Button>
+								<Chip
+									text="Split DNS"
+									leftIcon={<RepoForkedIcon className="w-4 h-4 mr-0.5" />}
+									className={cn('inline-flex items-center')}
+								/>
 								<Tooltip.Body>
 									Only clients that support split DNS (Tailscale v1.8 or later
 									for most platforms) will use this nameserver. Older clients

app/routes/machines/machine.tsx

@@ -150,9 +150,7 @@ export default function Page() {
 					<span className="text-sm text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
 						Managed by
 						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
+							<InfoIcon className="w-3.5 h-3.5" />
 							<Tooltip.Body>
 								By default, a machine’s permissions match its creator’s.
 							</Tooltip.Body>
@@ -209,9 +207,7 @@ export default function Page() {
 					<span className="text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
 						Approved
 						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
+							<InfoIcon className="w-3.5 h-3.5" />
 							<Tooltip.Body>
 								Traffic to these routes are being routed through this machine.
 							</Tooltip.Body>
@@ -242,9 +238,7 @@ export default function Page() {
 					<span className="text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
 						Awaiting Approval
 						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
+							<InfoIcon className="w-3.5 h-3.5" />
 							<Tooltip.Body>
 								This machine is advertising these routes, but they must be
 								approved before traffic will be routed to them.
@@ -276,9 +270,7 @@ export default function Page() {
 					<span className="text-ui-600 dark:text-ui-300 flex items-center gap-x-1">
 						Exit Node
 						<Tooltip>
-							<Tooltip.Button>
-								<InfoIcon className="w-3.5 h-3.5" />
-							</Tooltip.Button>
+							<InfoIcon className="w-3.5 h-3.5" />
 							<Tooltip.Body>
 								Whether this machine can act as an exit node for your tailnet.
 							</Tooltip.Body>

app/routes/machines/overview.tsx

@@ -1,5 +1,4 @@
 import { InfoIcon } from '@primer/octicons-react';
-import { Button, Tooltip, TooltipTrigger } from 'react-aria-components';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
 import { useLoaderData } from 'react-router';
 
@@ -15,6 +14,7 @@ import { getSession } from '~/utils/sessions.server';
 import { useLiveData } from '~/utils/useLiveData';
 import { initAgentSocket, queryAgent } from '~/utils/ws-agent';
 
+import Tooltip from '~/components/Tooltip';
 import { menuAction } from './action';
 import MachineRow from './components/machine';
 import NewMachine from './dialogs/new';
@@ -81,31 +81,23 @@ export default function Page() {
 			</div>
 			<table className="table-auto w-full rounded-lg">
 				<thead className="text-gray-500 dark:text-gray-400">
-					<tr className="text-left uppercase text-xs font-bold px-0.5">
+					<tr className="text-left px-0.5">
 						<th className="pb-2">Name</th>
 						<th className="pb-2 w-1/4">
 							<div className="flex items-center gap-x-1">
-								Addresses
+								<p className="uppercase text-xs font-bold">Addresses</p>
 								{data.magic ? (
-									<TooltipTrigger delay={0}>
-										<Button>
-											<InfoIcon className="w-4 h-4" />
-										</Button>
-										<Tooltip
-											className={cn(
-												'text-sm max-w-xs p-2 rounded-lg mb-2',
-												'bg-white dark:bg-zinc-800',
-												'border border-gray-200 dark:border-zinc-700',
-											)}
-										>
+									<Tooltip>
+										<InfoIcon className="w-4 h-4" />
+										<Tooltip.Body className="font-normal">
 											Since MagicDNS is enabled, you can access devices based on
 											their name and also at{' '}
 											<Code>
 												[name].
 												{data.magic}
 											</Code>
-										</Tooltip>
-									</TooltipTrigger>
+										</Tooltip.Body>
+									</Tooltip>
 								) : undefined}
 							</div>
 						</th>