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!