Sha256: 84534135cf631f293907e0799c5f9bdbbeaf20663230d3bb4a158e5eb07b590c
Contents?: true
Size: 1.24 KB
Versions: 1330
Compression:
Stored size: 1.24 KB
Contents
<%= 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>
Version data entries
1,330 entries across 1,330 versions & 2 rubygems