Primer ViewComponents v0.53.1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Tooltip with Primer::Beta::Button -->
<button id="button-with-tooltip" type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
    <span class="Button-label">Button</span>
  </span>
</button><tool-tip id="tooltip-3010e7f7-351f-4ca0-85c1-e5c5cc6ca989" for="button-with-tooltip" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You can press a button</tool-tip>
<!-- Tooltip with Primer::Beta::Link -->
<span data-view-component="true" class="position-relative"><a id="link-with-tooltip" href="#link-with-tooltip" data-view-component="true" class="Link Link--underline">Button</a>  <tool-tip id="tooltip-ea8be45d-bede-4acf-a357-b2358c98a48d" for="link-with-tooltip" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You can press a button</tool-tip></span>
<!-- Tooltip with Primer::IconButton -->
<button id="icon-button-47a342c3-ea44-40c4-83e9-67e4fc61d666" aria-labelledby="tooltip-dab0b830-6bc6-4622-95e4-c6c8b86d76cb" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium">  <svg aria-hidden="true" data-component="Octicon" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search Button-visual">
    <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
  </svg>
</button><tool-tip id="tooltip-dab0b830-6bc6-4622-95e4-c6c8b86d76cb" for="icon-button-47a342c3-ea44-40c4-83e9-67e4fc61d666" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Search</tool-tip>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Tooltip with Primer::Beta::Button
render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
  component.with_tooltip(text: tooltip_text, direction: direction)
  "Button"
end
# Tooltip with Primer::Beta::Link
render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip", underline: true)) do |component|
  component.with_tooltip(text: tooltip_text, direction: direction)
  "Button"
end
# Tooltip with Primer::IconButton
render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))

No notes provided.

No params configured.

No assets to display.