Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="flex items-center justify-center p-16">
<span class="midwest-tooltip" data-controller="midwest-tooltip">
  <span id="tooltip-trigger-11ef0" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-11ef0" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-11ef0">
    <a class="midwest-button variant-default size-default theme-primary" name="button" href="/">
      <span class="midwest-button-content">Hover me</span>
      <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
        <div class="midwest-loading-icon-inner">
          <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
          <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
            <circle cx="15" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="60" cy="15" r="9" fill-opacity="0.3">
              <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="105" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
          </svg>
        </div>
      </div>
    </a>
  </span>  <span id="tooltip-11ef0" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-11ef0" data-midwest-tooltip-target="popover">
    Helpful hint
  </span></span></div>
1
2
3
4
5
<div class="flex items-center justify-center p-16">
  <%= midwest_tooltip(tip: params[:tip] || "Helpful hint", placement: params[:placement] || :top) do %>
    <%= midwest_button("Hover me") %>
  <% end %>
</div>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

The tooltip text to display

Which side the tooltip appears on

Milliseconds before the tooltip appears (0 = immediate)

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Tooltip/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."