Tooltip

<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-1'>Hover here (Top)</span>

    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-1",
      tooltip_id: "tooltip-1",
      position: 'top'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-2",
      tooltip_id: "tooltip-2",
      position: 'bottom'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-3'>Hover here (Right)</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-3",
      tooltip_id: "tooltip-3",
      position: 'right'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>

  <%= pb_rails("flex/flex_item") do %>
    <span id='regular-tooltip-4'>Hover here (Left)</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#regular-tooltip-4",
      tooltip_id: "tooltip-4",
      position: 'left'
    }) do %>
        Whoa. I'm a tooltip.
    <% end %>
  <% end %>
<% end %>

<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
  <% end %>

  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
  <% end %>

  <%= pb_rails("tooltip", props: {
      trigger_element_selector: ".tooltip-example-trigger",
      tooltip_id: "example-tooltip",
      position: 'top'
    }) do %>
        Whoa. I'm a re-useable tooltip.
  <% end %>
<% end %>

<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>

<%= pb_rails("tooltip", props: {
  trigger_element_id: "result-1-sample-email-link",
  tooltip_id: "sample-email-tooltip-result-1",
  position: "top"
}) do %>
  Send Email
<% end %>