JarCastingInspector Gadget
Better AngularJS Popover with HTML content. I frequently need a richer popover experience than the one angular-ui bootstrap provides. So I thought I'd open source our implementation! See a few demos.
Dependencies
You'll need all the dependencies of bootstrap's popover plus angular:
- required:
- bootstrap (js and css)
- angular
- jquery
Install
bower install inspector-gadget --save
Documentation
Add the minified JS:
<script type="text/javascript" src="bower-components/inspector-gadget/inspector-gadget.min.js"></script>
Add the directive to your app's module:
angular.module('myApp', [
'ngRoute', 'ngSanitize', ...
'swd.inspector-gadget' // ADD ME!
]).
Use the directive:
<inspector-gadget>
<a href="#">Hover Me!</a>
<inspector-title>
I'm the popover's <em>title</em>!
</inspector-title>
<inspector-content>
<ul>
Hello <em>World!</em>
<li ng-repeat="i in [1,2,3]">{{i}}</li>
</ul>
</inspector-content>
</inspector-gadget>
We support most paramaters supported by bootstap's popover. Simply apply the corresponding parameter to the inspector-gadget tag:
<inspector-gadget data-placement="bottom" data-container="body">
...
We also support a timeout parameter which specifies in milliseconds how long after hovering off the anchor until the popover is hidden. The default value is 500 ms. Specify it as follows:
<inspector-gadget data-placement="bottom" data-container="body" data-timeout="1000">
...
Limitations
My boss calls these "opportunities for improvement".
Hovers Only
Currently, inspector-gadget only responds to hovers. We built this in part to do smarter hovering. So we currently only implement our own custom hovering style, which keeps the popover open even as you hover the popover. I plan on looking into getting other bootstrap triggers implemented.
A note on styling
Dont style using inspector-* tags, use the bootstrap popover classes (.popover, .popover-anchor, .popver-title, .popover-content) if you need to style or otherwise interact with that whole div. Or add your own classes/ids/etc to content within the popover.
What's popover-anchor?
This corresponds to the content anchored to the page. What you hover over. Use it to style this entire div.
If popovers are appearing at wierd places, remember its this div that matters. This div flows onto the page as a regular div, its up to you to size it correctly.
A common thing you may wish to do is style this div to shrink to the content. IE
.popover-content {
display: inline-block
}
Sponsors
This project was developed for our search relevancy tuning tools Quepid and Splainer -- all while doing work for our Solr and Elasticsearch consulting firm OpenSource Connections