CODEWITHSUNDEEP
cssangularjshtmltwitter-bootstrapmulti-select
Jon
Jon

Reputation: 301

Hover popup display for angularJS multiselect options

I've got a UI page in HTML5/AngularJS/Bootstrap. The page has a handful of dropdowns that are populated by the controller.js from a service call. I've got no problems parsing that information and getting it into the multiselect dropdowns. However, the brain trust that is our management and end-users have decided that in addition to the dropdowns displaying an abreviation for each selectable option, they want a popup description to appear next to each option when the user hovers over it. My personal opinions aside, I can't tell them no until i can at least show them what it would look like.

If this was just pure css, with panels dropping down, I could see how this would be easy that add some mouseover-style panel/popouts. But I'm using this angularjs-dropdown-multiselect.js plugin... which works great so far, but I'm not sure how to add to it. There's some code in that js that causes the option to slide slightly right, and change color when the user hovers over it, but not knowing enough about how that event would work, I'm not sure where even in the code to look for what changes on the mouseover.

For reference, the plugin came from here: http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

I can post the js code if anyone wants to take a look at that, but I'm not sure if that's even a necessary part of this question... My first thought is just to try and capture that event and maybe change the text of the display?

I've been researching this one for a good day now, and I can't find answers that apply to all parts of this puzzle... Has anyone got any experience or ideas on how to add that kind of functionality to a dropdown? or is this bordering on territory where I'm better off rigging a situation where I've got a textbox which, onFocus might display a dropdown - imitating panel, which could then have sub panels displayed on items?

Upvotes: 0

Views: 1938

Answers (1)

Silvio
Silvio

Reputation: 6031

Since I couldn't find a way to programmatically add tooltips on the angularjs-dropdown-multiselect directive, I assumed that you are willing to extend it and then I created a quick fiddle (based on examples available) to add the angular-ui tooltip on the creation of the items.

This is the link to the tooltip that will explain how to position it https://angular-ui.github.io/bootstrap/#/tooltip

This fiddle will give you an idea of where to start: https://jsfiddle.net/silvioamaral/ghcma6z3/1/

on ln 232 that creates the <a> in the <li>:

template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" >';

Just add the angular-ui directive :

uib-tooltip="{{option}}"

like

template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))"  uib-tooltip="{{option}}">';

I added to the anchor since the other elements (<li> <div>) seem to be bound to options such as existence of groups / checkboxes, etc.

Hope it helps

Edit: grammar and jsfiddle link

Upvotes: 1

Related Questions