AngularJS Popper2x Components
AngularJS Flexible Directives for positioning and controlling pop-up like elements
Installation
npm install --save angularjs-popper2x-components
Configuration
The directive requires popper.js 2 and jQuery 3 to run.
- Install dependencies (or skip and use CDN)
- Add dependencies to your page
- Import the minified script from
dist/popper2x-components.min.js
to your page
- Add the module
popupExt
as dependency of your main application module
angular
Usage
Check the demos located in the demo folder from the root to see some full examples on how to use the components
Tooltip
Use the tooltip directive by adding the property tooltip
to your HTML element.
The value of that property will be the selector to the custom tooltip panel
that you'd like to show.
<!-- directive will search for the element with id="tooltip" --> I'm a button I'm a tooltip
You can also leave it blank and attach a text or html straight to the directive, by using the config property.
<!-- passing custom configuration with value to be renderer as the content of the tooltip --> I'm a button
A third property can be added, so you can inform another selector that will be the target of the tooltip, instead of the button itself.
<!-- will position element with id="tooltip" according to the boundaries of element with id="target" --> I'm a tooltip
You can check out all popper custom modifiers and alter the popup configurations and behaviour
/* you can find the full example in demo folder */ angular
<!-- retrieving options from the controller --> I'm a button
Dropdown
Use the dropdown directive by adding the property dropdown
to your HTML element.
The value of that property will be the selector to the custom dropdown panel
that you'd like to show.
<!-- directive will search for the element with id="dropdown" --> I'm a button I'm a dropdown
The dropdown container can have elements of any types.
Clicking on any of those elements within the pop-up can trigger or not the action
to close the dropdown. If you want the dropdown to close when clicking the element, set the property data-destroy
to true on it.
Dropdown button Action Another action Hey, keep it open!
Just like the tooltip directive, you can inform another selector that will be the target of the dropdown, instead of the button itself.
<!-- will position element with id="dropdown" according to the boundaries of element with id="target" --> I'm a dropdown
Additionally, you can use the property config to override popper configurations as well as the directive standards. You can check out all popper custom modifiers and alter the popup configurations and behaviour.
angular
<!-- retrieving options from the controller --> Dropdown button Action Another action Hey, keep it open!
Flexibility is a double-edged sword. Depending on the order you place your dropdown button and container triggered by it, the tab order can become a bit tricky, hence the directive takes control of the tabindex by default. You can override this behaviour if you'd like to define your own tabindex or if you tie the elements in a progressive order, to do so set the property
controlTabOrder
in the config to false.
Build
If you are cloning the repository you must have gulp globally installed and run the following commands in order to have the dist folder generated:
npm install
npm run build
Testing
Tests are coded using Karma + Jasmine. The easiest way to run these checks is the following
npm install
npm test