Popover

Displays rich content in a portal, triggered by a button.

Example

Popover do
	PopoverTrigger(class: 'w-full') do
		Button(variant: :outline) { "Open Popover" }
	end
	PopoverContent(class: 'w-40') do
		Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
			svg(
				xmlns: "http://www.w3.org/2000/svg",
				fill: "none",
				viewbox: "0 0 24 24",
				stroke_width: "1.5",
				stroke: "currentColor",
				class: "w-4 h-4 mr-2"
			) do |s|
				s.path(
					stroke_linecap: "round",
					stroke_linejoin: "round",
					d:
						"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
				)
			end
			plain "Profile"
		end
		Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
			svg(
				xmlns: "http://www.w3.org/2000/svg",
				fill: "none",
				viewbox: "0 0 24 24",
				stroke_width: "1.5",
				stroke: "currentColor",
				class: "w-4 h-4 mr-2"
			) do |s|
				s.path(
					stroke_linecap: "round",
					stroke_linejoin: "round",
					d:
						"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
				)
				s.path(
					stroke_linecap: "round",
					stroke_linejoin: "round",
					d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
				)
			end
			plain "Settings"
		end
		Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
			svg(
				xmlns: "http://www.w3.org/2000/svg",
				fill: "none",
				viewbox: "0 0 24 24",
				stroke_width: "1.5",
				stroke: "currentColor",
				class: "w-4 h-4 mr-2"
			) do |s|
				s.path(
					stroke_linecap: "round",
					stroke_linejoin: "round",
					d:
						"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
				)
			end
			plain "Logout"
		end
	end
end

Placement

div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
	# -- TOP --
	Popover(options: { placement: 'top' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'top' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'top-start' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'top-end' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	# -- RIGHT --
	Popover(options: { placement: 'right' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'right' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'right-start' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'right-end' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	# -- LEFT --
	Popover(options: { placement: 'left' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'left' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'left-start' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'left-end' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	# -- BOTTOM --
	Popover(options: { placement: 'bottom' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'bottom-start' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end

	Popover(options: { placement: 'bottom-end' }) do
		PopoverTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
		end
		PopoverContent(class: 'w-40') do
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
		end
	end
end

Trigger

Popover(options: { trigger: 'click' }) do
	PopoverTrigger(class: 'w-full') do
		Button(variant: :outline) { "Click" }
	end
	PopoverContent(class: 'w-40') do
		Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Profile"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
					)
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
					)
				end
				plain "Settings"
			end
			Link(href: "#", variant: :ghost, class: 'w-full justify-start pl-2') do
				svg(
					xmlns: "http://www.w3.org/2000/svg",
					fill: "none",
					viewbox: "0 0 24 24",
					stroke_width: "1.5",
					stroke: "currentColor",
					class: "w-4 h-4 mr-2"
				) do |s|
					s.path(
						stroke_linecap: "round",
						stroke_linejoin: "round",
						d:
							"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
					)
				end
				plain "Logout"
			end
	end
end

Installation

Manual installation

Add RubyUI::Popover to app/components/ruby_ui/popover.rb

# frozen_string_literal: true

module RubyUI
	class Popover < Base
		def initialize(options: {}, **attrs)
			@options = options
			super(**attrs)
		end

		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				data: {
					controller: "ruby-ui--popover",
					ruby_ui__popover_options_value: @options.to_json,
					ruby_ui__popover_trigger_value: @options[:trigger] || "hover"
				}
			}
		end
	end
end

Add RubyUI::PopoverContent to app/components/ruby_ui/popover/popover_content.rb

# frozen_string_literal: true

module RubyUI
	class PopoverContent < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				data: {
					ruby_ui__popover_target: "content"
				},
				class: [
					"hidden z-50 rounded-md border bg-background p-1 text-foreground shadow-md outline-none",
					"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
					"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
					"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
					"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
					"absolute"
				]
			}
		end
	end
end

Add RubyUI::PopoverTrigger to app/components/ruby_ui/popover/popover_trigger.rb

# frozen_string_literal: true

module RubyUI
	class PopoverTrigger < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				data: {
					ruby_ui__popover_target: "trigger"
				},
				class: "inline-block"
			}
		end
	end
end

Add popover_controller.js to app/javascript/controllers/ruby_ui/popover_controller.js

import { Controller } from "@hotwired/stimulus";
import {
  computePosition,
  flip,
  shift,
  offset,
  autoUpdate,
} from "@floating-ui/dom";

export default class extends Controller {
  static targets = ["trigger", "content"];
  static values = {
    open: { type: Boolean, default: false },
    options: { type: Object, default: {} },
    trigger: { type: String, default: "hover" },
  };

  connect() {
    this.closeTimeout = null;
    this.cleanup = null;
    this.addEventListeners();
  }

  disconnect() {
    this.removeEventListeners();
    if (this.cleanup) {
      this.cleanup();
    }
  }

  addEventListeners() {
    if (this.triggerValue === "hover") {
      this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
      this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
      this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
      this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
    } else if (this.triggerValue === "click") {
      this.triggerTarget.addEventListener("click", this.handleClick);
      document.addEventListener("click", this.handleOutsideClick);
    }
  }

  removeEventListeners() {
    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
    this.triggerTarget.removeEventListener("click", this.handleClick);
    document.removeEventListener("click", this.handleOutsideClick);
  }

  handleMouseEnter = () => {
    clearTimeout(this.closeTimeout);
    this.openValue = true;
    this.showPopover();
  };

  handleMouseLeave = () => {
    this.closeTimeout = setTimeout(() => {
      this.openValue = false;
      this.hidePopover();
    }, 100);
  };

  handleClick = (event) => {
    event.stopPropagation();
    this.openValue = !this.openValue;
    this.openValue ? this.showPopover() : this.hidePopover();
  };

  handleOutsideClick = (event) => {
    if (!this.element.contains(event.target) && this.openValue) {
      this.openValue = false;
      this.hidePopover();
    }
  };

  showPopover() {
    this.contentTarget.classList.remove("hidden");
    this.updatePosition();
  }

  hidePopover() {
    this.contentTarget.classList.add("hidden");
    if (this.cleanup) {
      this.cleanup();
    }
  }

  updatePosition() {
    if (this.cleanup) {
      this.cleanup();
    }

    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
      computePosition(this.triggerTarget, this.contentTarget, {
        placement: this.optionsValue.placement || "bottom",
        middleware: [flip(), shift(), offset(8)],
      }).then(({ x, y }) => {
        Object.assign(this.contentTarget.style, {
          left: `${x}px`,
          top: `${y}px`,
        });
      });
    });
  }
}

Update the Stimulus controllers manifest file

Importmap!

You don't need to run this command if you are using Importmap

rake stimulus:manifest:update

Install @floating-ui/dom Javascript dependency

// with yarn
yarn add @floating-ui/dom
// with npm
npm install @floating-ui/dom
// with importmaps
bin/importmap pin @floating-ui/dom

Components

Component	Built using	Source
`Popover`	Phlex	See source
`PopoverContent`	Phlex	See source
`PopoverTrigger`	Phlex	See source
`PopoverController`	Stimulus JS	See source

RubyUIPre Release

Getting Started

Installation

Components36

RubyUIPre Release

Popover

Example

Placement

Trigger

Installation

Using RubyUI CLI

Manual installation

Importmap!

Components