|
3 年之前 | |
---|---|---|
.. | ||
demo.html | 3 年之前 | |
demo.js | 3 年之前 | |
readme.md | 3 年之前 |
A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more.
Like the Bootstrap jQuery plugin, the popover requires the tooltip module.
There are two versions of the popover: uib-popover
and uib-popover-template
:
uib-popover
takes text only and will escape any HTML provided for the popover
body.uib-popover-html
takes an expression that evaluates to an html string. The user is responsible for ensuring the
content is safe to put into the DOM!uib-popover-template
a URL representing the location of a template to
use for the popover body. Note that the contents of this template need to be
wrapped in a tag, e.g., <div></div>
.The popover directives provides several optional attributes to control how it will display:
popover-title
: A string to display as a fancy title.popover-placement
: Where to place it? Defaults to "top", but also accepts
"bottom", "left", "right".popover-animation
: Should it fade in and out? Defaults to "true".popover-popup-delay
: For how long should the user have to have the mouse
over the element before the popover shows (in milliseconds)? Defaults to 0.popover-popup-close-delay
: For how long should the popover remain open
after the close trigger event? Defaults to 0.popover-trigger
: What should trigger the show of the popover? See the
tooltip
directive for supported values.popover-append-to-body
: Should the tooltip be appended to $body
instead of
the parent element?popover-is-open
(Default: false):
Whether to show the popover.The popover directives require the $position
service.
The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.
Known issues
For Safari 7+ support, if you want to use focus popover-trigger
, you need to use an anchor tag with a tab index. For example:
<a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-default">
Click Me
</a>