diff options
Diffstat (limited to 'example')
| -rw-r--r-- | example/index.css | 5 | ||||
| -rw-r--r-- | example/index.html | 23 | ||||
| -rw-r--r-- | example/nsPopover.js | 10 |
3 files changed, 35 insertions, 3 deletions
diff --git a/example/index.css b/example/index.css index 49bae04..d641f03 100644 --- a/example/index.css +++ b/example/index.css @@ -40,9 +40,14 @@ article { float: left;
}
+article:after {
+ clear: both;
+}
+
h1 {
border-bottom: solid 1px #b9b8bb;
padding-bottom: .5em;
+ display:block;
}
a {
diff --git a/example/index.html b/example/index.html index dcf33fd..28ff4fe 100644 --- a/example/index.html +++ b/example/index.html @@ -53,6 +53,29 @@ Hover me
</a>
</article>
+
+ <h1> Tooltip </h1>
+ <article>
+ <p>
+ <b>nsPopover</b> could be used as a simple dropdown menu. You can use the built-in "ns-popover-list-theme" to
+ style the popover as a dropdown or create a custom one.
+ </p>
+
+ <button ns-popover
+ ns-popover-template="menu"
+ ns-popover-trigger="click"
+ ns-popover-theme="ns-popover-tooltip-theme"
+ ns-popover-timeout="1">
+ Click Me
+ </button>
+
+ <a ns-popover
+ ns-popover-template="menu"
+ ns-popover-trigger="mouseenter"
+ ns-popover-theme="ns-popover-tooltip-theme">
+ Hover me
+ </a>
+ </article>
</section>
</body>
diff --git a/example/nsPopover.js b/example/nsPopover.js index cfdb904..505fbba 100644 --- a/example/nsPopover.js +++ b/example/nsPopover.js @@ -140,9 +140,13 @@ });
});
- elm.on('mouseout', function() {
- hider_.hide($popover, options.timeout);
- });
+ elm
+ .on('mouseout', function() {
+ hider_.hide($popover, options.timeout);
+ })
+ .on('mouseover', function() {
+ hider_.cancel();
+ });
$popover
.on('mouseout', function(e) {
|