When creating a Stimulus component that should always do the same thing on a certain event (eg. on "hover"), what's the preferred way to set up that action?
I want to write this, for example:
<a data-controller="tooltip" title="something">Show a tooltip on hover</a>
instead of
<a data-controller="tooltip" title="something" data-action="hover->tooltip#showTooltip">Show a tooltip on hover</a>
Including the data-action="hover->tooltip#showTooltip"
feels very redundant to me if the only point of the Stimulus component is to show the tooltip on hover.
I'm doing this right now by adding an event listener manually in the initialize()
function, but I'm not sure if that's a good idea:
export default class Tooltip extends Controller {
initialize(){
this.element.addEventListener("hover", showTooltip())
}
showTooltip(){
// ...
}
}