ember-widgets
ember-widgets copied to clipboard
Popover on mouse move
is there a way to configure the popover widget to appear on mouse over
Not out of the box, but you could extend Ember.Widgets.PopoverComponent
and Ember.Widgets.PopoverLinkComponent
, and add the behavior you want to the PopoverLinkComponent
in a similar way to how click
is defined now.
I'll leave this open tagged as an enhancement, since it sounds useful - we might consider adding it in the future.
I got close on this but never got it over the finish line. Here's my code.
HoverPopoverLinkComponent = Em.Component.extend
classNames: ['hover-popover']
placement: 'top'
content: null
rootElement: '.ember-application'
fade: true
mouseEnter: ->
@showPopover()
mouseLeave: ->
@hidePopover()
showPopover: ->
popover = @get('_popover')
if popover?.get('_state') is 'inDOM'
return
else
popoverView = Em.View.extend Em.Widgets.PopoverMixin,
layoutName: 'popover-link-popover'
controller: this
targetElement: @get('element')
container: @get('container')
placement: Em.computed.alias 'controller.placement'
fade: @get('fade')
contentViewClass: IbottaWeb.PopoverContentView
classNames: 'hover-popover-content'
bodyClick: ->
popover = popoverView.create()
@set '_popover', popover
popover.appendTo @get('rootElement')
hidePopover: ->
popover = @get('_popover')
popover?.destroy()
I had trouble with it lining up correctly all the time. Hopefully this is a good start!