Option to remove arrows on selected popovers

[markgenest]

It would be nice to include a class or data attribute that you can add to an individual popover to remove the arrow for only that selected popover.

For example, if you wanted to start a stepped tutorial with a modal like intro that isn't linked to a particular element on the page (hence wouldn't need an arrow).

What I did to hack around this was to change the css to hide the highlighted element but show the popover so it seems like the popover isn't tied to any element on the page. However the arrow still appears which ruins the whole effect.

I tried to target the individual popovers through css to solve this, but the problem is that the popovers are generated in the DOM underneath the elements they're appended to, not INSIDE the elements, so I can't target each popover individually through its parent element id or class. Which leaves only a jquery option.

I started by stripping

<div class="arrow"></div>

out of bootstro.js template and then basically adding it in only when a class in called to a certain id.

 $(document).ready(function() {
        elem = $('div#name');
        if (elem.hasClass('add-arrow')) {
            $('.popover').append('<div class="arrow"></div>');
        } 
    });

It seems to work on the element only when the page is first loaded and is the first step. It does not work on subsequent steps or when one goes back to the first step. It appears the bootstro.js is overriding this script except when the page is first loaded. I have placed this script at the bottom of the page for bootstro custom options and not in the bootstro.js itself.

Any ideas on how to modify this or even construct a custom data-attibute that would remove the arrow div? Any help would be greatly appreciated.

Thanks so much!
Mark Genest