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

Popover on mouse move about ember-widgets HOT 2 OPEN

addepar commented on June 30, 2024

Popover on mouse move

from ember-widgets.

Comments (2)

azirbel commented on June 30, 2024

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.

from ember-widgets.

blimmer commented on June 30, 2024

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!

from ember-widgets.

Recommend Projects