Midwest Component Library v0.28.2

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
<ul class="midwest-dropdown-menu w-64 relative">
  <span class="midwest-tooltip" data-controller="midwest-tooltip">
    <span id="tooltip-trigger-19d60" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-19d60" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-19d60">
      <button class="midwest-dropdown-item as-button" role="menuitem">
        <label class="midwest-label " for="">
          Settings
        </label>
      </button>
    </span>  <span id="tooltip-19d60" popover="manual" role="tooltip" style="position-anchor: --tooltip-19d60" data-midwest-tooltip-target="popover" class="midwest-motion motion-scale motion-blur from-down trigger-hover midwest-tooltip-popover placement-top">
      Manage your account settings
    </span></span>
  <span class="midwest-tooltip" data-controller="midwest-tooltip">
    <span id="tooltip-trigger-19d68" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-19d68" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-19d68">
      <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
        <label class="midwest-label " for="">
          Profile
        </label>
      </a>
    </span>  <span id="tooltip-19d68" popover="manual" role="tooltip" style="position-anchor: --tooltip-19d68" data-midwest-tooltip-target="popover" class="midwest-motion motion-scale motion-blur from-down trigger-hover midwest-tooltip-popover placement-top">
      View your public profile
    </span></span>
</ul>
1
2
3
4
<ul class="midwest-dropdown-menu w-64 relative">
  <%= midwest_dropdown_item(label: 'Settings', as: :button, tooltip: 'Manage your account settings') %>
  <%= midwest_dropdown_item(label: 'Profile', path: '#', tooltip: 'View your public profile') %>
</ul>

With Tooltip

A button dropdown item with a tooltip shown on hover.

No params configured.

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

Accessibility

Figma embed for Dropdown Item/with_tooltip

Annotate a preview to embed its Figma design here:

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