<%= pb_rails("flex", props: { gap: "md", 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: { 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 %>

<%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
  <%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
  <%= pb_rails("body") do %>
      Tooltip is: <code id="show-tooltip-state">enabled</code>
  <% end %>
  <%= pb_rails("flex/flex_item") do %>
    <span id="truncated-tooltip-1">Hover me</span>
    <%= pb_rails("tooltip", props: {
      trigger_element_selector: "#truncated-tooltip-1",
      tooltip_id: "truncated-1",
      position: "right",
    }) do %>
        Tooltip is enabled
    <% end %>
  <% end %>
<% end %>


<script>
const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
const showTooltipStateText = document.getElementById("show-tooltip-state");

function hideTooltipIfNotTruncated(tooltipId) {
  const tooltipElement = document.querySelector(
    `[data-pb-tooltip-tooltip-id="${tooltipId}"]`
  );

  tooltipElement.dataset.pbTooltipShowTooltip =
    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";

  showTooltipStateText.innerText = 
    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
}

toggleTooltipButton.addEventListener("click", () => {
  hideTooltipIfNotTruncated("truncated-1");
});
</script>