x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="midwest-dropdown-menu w-64 relative"> <span class="midwest-tooltip" data-controller="midwest-tooltip"> <span id="tooltip-trigger-11f08" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-11f08" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-11f08"> <button class="midwest-dropdown-item as-button" role="menuitem"> Settings </button> </span> <span id="tooltip-11f08" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-11f08" data-midwest-tooltip-target="popover"> Manage your account settings </span></span> <span class="midwest-tooltip" data-controller="midwest-tooltip"> <span id="tooltip-trigger-11f10" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-11f10" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-11f10"> <a class="midwest-dropdown-item as-link" role="menuitem" href="#"> Profile </a> </span> <span id="tooltip-11f10" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-11f10" data-midwest-tooltip-target="popover"> 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.
Figma embed for Dropdown Item/with_tooltip
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."