ember-widgets icon indicating copy to clipboard operation
ember-widgets copied to clipboard

Popover on mouse move

Open billybonks opened this issue 10 years ago • 2 comments

is there a way to configure the popover widget to appear on mouse over

billybonks avatar Apr 28 '14 22:04 billybonks

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.

azirbel avatar Jul 18 '14 23:07 azirbel

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!

blimmer avatar Feb 05 '15 00:02 blimmer