Tooltip

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Tooltip from '@tcpsystems/ui/foundation/Tooltip';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Tooltip text="Copy the deployment ID to your clipboard">
		<Button variant="ghost" icon="copy" iconOnly aria-label="Copy deployment ID" />
	</Tooltip>
	<Tooltip text="Open deployment settings">
		<Button variant="ghost" icon="settings" iconOnly aria-label="Open settings" />
	</Tooltip>
	<Tooltip text="Remove gateway-vnext from this project">
		<Button variant="ghost" icon="trash" iconOnly aria-label="Remove deployment" />
	</Tooltip>
</Cluster>

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Tooltip from '@tcpsystems/ui/foundation/Tooltip';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Tooltip text="Shows above the invoice action" side="top">
		<Button>Top tooltip</Button>
	</Tooltip>
	<Tooltip text="Shows below the invoice action" side="bottom">
		<Button>Bottom tooltip</Button>
	</Tooltip>
</Cluster>