diff --git a/lib/ruby_ui/tooltip/tooltip_controller.js b/lib/ruby_ui/tooltip/tooltip_controller.js index 45c4e4ec..20ba35ce 100644 --- a/lib/ruby_ui/tooltip/tooltip_controller.js +++ b/lib/ruby_ui/tooltip/tooltip_controller.js @@ -1,5 +1,5 @@ import { Controller } from "@hotwired/stimulus"; -import { computePosition, autoUpdate, offset } from "@floating-ui/dom"; +import { computePosition, autoUpdate, offset, shift } from "@floating-ui/dom"; export default class extends Controller { static targets = ["trigger", "content"]; @@ -24,7 +24,10 @@ export default class extends Controller { setFloatingElement() { this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => { - computePosition(this.triggerTarget, this.contentTarget, { placement: this.placementValue, middleware: [offset(4)] }).then(({ x, y }) => { + computePosition(this.triggerTarget, this.contentTarget, { + placement: this.placementValue, + middleware: [offset(4), shift()] + }).then(({ x, y }) => { Object.assign(this.contentTarget.style, { left: `${x}px`, top: `${y}px`,