CODEWITHSUNDEEP
javascriptjquerybootstrap-modalorgchart
Rondeau Samuel
Rondeau Samuel

Reputation: 29

Add modal window in node content for each element I add

I'm working right now with the Library jquery.orgchart.js.

I have different level in my orgchart that I show and everything is fine. For the last level, people want to see each people in the team, in the same node, and with a link that popup to show an image with some text.

For the node, we can add a secondmenu like in this example : https://github.com/wesnolte/jOrgChart/issues/37

I would like to know if it is possible to have a popup for each element(each employee) I add in the node on hover or onclick. Here is the code of my button dialogmodal from bootstrap :

OnHover : It shows only the title and not the data-content :

<button type="button" class="btn btn-primary" data-toggle="popover" title="Test en cours" data-content="You gotta go through it to see there aint nothing to it. Listen to the silence."> Hover 1</button>

                $(document).ready(function() {
                       $('[data-toggle="popover"]').popover({
                          placement: 'bottom',
                          trigger: 'click',
                          title: 'Sign in to the website builder',
                          content: 'testing 123'    
                       });

                    });

Maybe I have to bind click event on html components or play with the Library jquery.orgchart.js?! If I put the same button in the page and not the orgchart, it works well.

Image for modal that works If you need some others information to help me, just ask.

Thanks for your help.

Here is the solution for my popup hiding : 

        $(document).ready(function() {
                       $('[data-toggle="popover"]').popover({
                          placement: 'bottom',
                          trigger: 'hover',
                          title: 'Sign in to the website builder',
                          content: 'testing 123',
                          container: 'body' 
                       });

                    });

I add the tag container :'body' and my popup finally appear!

Upvotes: 1

Views: 241

Answers (1)

Rondeau Samuel
Rondeau Samuel

Reputation: 29

I just found the solution here : github.com/twbs/bootstrap/issues/5889 I updated my post

Upvotes: 1

Related Questions