Tailwind only Tooltips for LiveView Components

With the functional components below you should be able to add your own tailwind tooltip with top bottom left and right positions Enjoy!

  attr :position, :string, default: "top"
  slot :tip, required: true
  slot :inner_block, required: true

  def tooltip(%{position: "top"} = assigns) do
    ~H"""
    <div class="inline group relative">
      <%= render_slot(@inner_block) %>
      <span class="pointer-events-none absolute hidden left-1/2 bottom-full mb-3 transform -translate-x-1/2 rounded bg-white p-5 text-black group-hover:block whitespace-nowrap shadow-xl">
        <%= render_slot(@tip) %>
        <span class="z-0 absolute left-1/2 -bottom-[4px] h-3 w-3 transform -translate-x-1/2 rotate-45 bg-white">
        </span>
      </span>
    </div>
    """
  end

  def tooltip(%{position: "bottom"} = assigns) do
    ~H"""
    <div class="inline group relative">
      <%= render_slot(@inner_block) %>
      <span class="pointer-events-none absolute hidden left-1/2 top-full mt-3 transform -translate-x-1/2 rounded bg-white p-5 text-black group-hover:block whitespace-nowrap shadow-xl">
        <%= render_slot(@tip) %>
        <span class="z-0 absolute left-1/2 -top-[4px] h-3 w-3 transform -translate-x-1/2 rotate-45 bg-white">
        </span>
      </span>
    </div>
    """
  end

  def tooltip(%{position: "left"} = assigns) do
    ~H"""
    <div class="inline-block group relative inline">
      <%= render_slot(@inner_block) %>
      <span class="pointer-events-none absolute hidden -left-1 top-1/2 -translate-x-full -translate-y-1/2 transform whitespace-nowrap rounded bg-zinc-100 p-5 text-black shadow-xl group-hover:block">
        <%= render_slot(@tip) %>
        <span class="absolute -right-1 top-1/2 h-3 w-3 -translate-y-1/2 rotate-45 transform bg-zinc-100">
        </span>
      </span>
    </div>
    """
  end

  def tooltip(%{position: "right"} = assigns) do
    ~H"""
    <div class="inline-block group relative">
      <%= render_slot(@inner_block) %>
      <span class="pointer-events-none absolute hidden -right-1 top-1/2 translate-x-full -translate-y-1/2 transform whitespace-nowrap rounded bg-zinc-100 p-5 text-black shadow-xl group-hover:flex">
        <%= render_slot(@tip) %>
        <span class="absolute -left-1 top-1/2 h-3 w-3 -translate-y-1/2 rotate-45 transform bg-zinc-100">
        </span>
      </span>
    </div>
    """
  end