<.tooltip id="tooltip-single-top" placement="top">
  <div class="kt-text-red-600 kt-font-sans">Tooltip Target</div>
  <:data>
    <div class="kt-text-red-600">Tooltip Content</div>
  </:data>
</.tooltip>

<.tooltip id="tooltip-single-left" placement="left">
  <div class="kt-text-orange-600 kt-font-sans">Tooltip Target</div>
  <:data>
    <div class="kt-text-orange-600">Tooltip Content</div>
  </:data>
</.tooltip>

<.tooltip id="tooltip-single-right" placement="right">
  <div class="kt-text-teal-600 kt-font-sans">Tooltip Target</div>
  <:data>
    <div class="kt-text-teal-600">Tooltip Content</div>
  </:data>
</.tooltip>

<.tooltip id="tooltip-single-bottom">
  <div class="kt-text-indigo-600 kt-font-sans">Tooltip Target</div>
  <:data>
    <div class="kt-text-indigo-600">Tooltip Content</div>
  </:data>
</.tooltip>