swAngular - Popover

This is an Shopware-AngularJs Component, it can be installed via Bower.

##Installation Via bower:

bower install sw-angular-popover

##Integrate the Component

###Popover Simple Its easy to add the Popup for an HTML-Element :

<span sw-angular-popover="cool popover" class="ng-isolate-scope" data-original-title="" title="">Test Span</span>

You only got to add "sw-angular-popover" to get an Popover. The Value of the Attribute will be the Popup-Text.

###Popover with own Template Its possible to load external Templates. The HTML Elements looks like:

<img ng-src="{{picture.url}}" 
	width="200px" 
	sw-angular-popover="" 
	sw-url="/templates/popover/template1.html" 
	sw-options="options" 
	class="ng-isolate-scope" 
	data-original-title="" 
	title="">

Beside the "sw-angular-popover" you can add "sw-url". The "sw-url" Attribute gets the Path to the external Template.

###Options Its Possible to configure the Popover with Options:

animation:
Type: Boolean
default: true
description: apply a CSS fade transition to the popover

html:
Type: Boolean
default: false
description: Insert HTML into the popover.
If false, jQuery's text method will be used to insert
content into the DOM. Use text if you're worried about XSS attacks.

placement:
Type: string | function
default: 'auto'
description: how to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover.
For example, if placement is "auto left", the popover will display to the
left when possible, otherwise it will display right.

selector:
Type: string
default: false
description: if a selector is provided, popover objects will be delegated to the specified targets.
In practice, this is used to enable dynamic HTML content to have popovers added.
See this and an informative example.

trigger:
Type: string
default: 'click'
description: how popover is triggered - click | hover | focus | manual

title:
Type: string | function
default: ''
description: default title value if title attribute isn't present

delay:
Type: number | object
default: 0
description: delay showing and hiding the popover (ms) - does not apply to
manual trigger type If a number is supplied, delay is applied to both hide/show
Object structure is: delay: { show: 500, hide: 100 }

container:
Type: string | false
default: false
description: Appends the tooltip to a specific element. Example: container: 'body'

##DEMO Here is an Example