merlin-popovers-library v0.0.2

Merlin Popovers

How to use

• Include project into your module

import { MerlinPopoversLibraryModule } from 'merlin-popovers-library';
@NgModule({
  imports: [MerlinPopoversLibraryModule]
})

• Add a popover in your html

<element-for-popover>
  <p> element content </p>
  <div *merlinPopover>
    I'll show up when ypu mouse over the element for popover
  </div>
</element-for-popover>

• Add a popover with options

<element-for-popover>
  <p> element content </p>
  <div *merlinPopover="'position:left;target:mouse'">
    I will show up to the left of the mouse now
  </div>
</element-for-popover>

Options

• Target: 'ele' | 'mouse' | 'x,y' = 'ele' by default
  • Define where you want the popover to be anchored to
  • 'ele' = side of the element
  • 'mouse' = follow the mouse when visible
  • 'x,y' = coordinates relative to the page to display this popover at
• Position: 'top', 'bottom', 'left', 'right' = 'bottom' by default
  • What side of the anchor to display at
• isInteractive: true | false = false by default
  • By default, the popover will not capture mouse events. If you want to be able to mouse over the popover and it not hide, set this to true
• isVisible: true | false | undefined = undefined by default
  • By default the popover will show automatically based on mouse being over its parent or itself. and hide when the mouse leaves. You can override this behavior by setting this value
• Delay: number = 10 by default
  • How long to wait for mouse events before showing and hiding the popover.