x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div contents data-controller="context-menu"> <div class="card text-sm flex items-center justify-center aspect-widescreen" data-action="contextmenu->context-menu#show:prevent click@document->context-menu#hide"> Right click here </div> <div popover="manual" class="popover popover--unanchored" style="--popover-size: 8rem;" data-context-menu-target="content" role="menu" aria-label="Context Menu"> <div class="menu"> <div class="menu__group" role="group"> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#">Back</a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#">Forward</a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#">Reload</a> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div contents data-controller="context-menu"> <div class="card text-sm flex items-center justify-center aspect-widescreen" data-action="contextmenu->context-menu#show:prevent click@document->context-menu#hide"> Right click here </div> <div popover="manual" class="popover popover--unanchored" style="--popover-size: 8rem;" data-context-menu-target="content" role="menu" aria-label="Context Menu"> <div class="menu"> <div class="menu__group" role="group"> <%= link_to "Back", "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> <%= link_to "Forward", "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> <%= link_to "Reload", "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> </div> </div> </div></div>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "content" ] show({ clientX, clientY }) { this.contentTarget.style.insetInlineStart = `${clientX}px` this.contentTarget.style.insetBlockStart = `${clientY}px` this.contentTarget.showPopover() } hide({ target }) { !this.contentTarget.contains(target) && this.contentTarget.hidePopover() }}No notes provided.