popover() in BootStrap SharePoint master page

Question

I am new to BootStrap/jQuery and relatively new to SP 2010 branding.

I am trying to get a popover work in my master page with no luck. I am not sure what I'm missing here. This is the code I'm trying to get working in my page.

HTML:

<div class="well">
    <p>
        <a href="#" id="hoverOver" class="btn btn-danger " rel="popover" 
            data-original-title="Example PopOver" 
            data-content="BootStrapping SharePoint aren't we now!" 
            data-placement="top">Hover Over Me!
        </a>
    </p>
</div>

JavaScript:

$(document).ready((function() {
    $('#hoverOver').popover();
}

CSS:

.well{
    margin-left:40px;
} 

JSFIDDLE: http://jsfiddle.net/kKAtN/

I have bootstrap.js, bootstrap.min and jquery-1.8.3.min in the following folder:

C:\\Program Files\\Common Files\\Microsoft Shared\\Web Server extensions\\14\\TEMPLATE\\LAYOUTS\\TwitterBootStrapMasterPage\\js

How would I get the popover to work?

Answer 1

1. You will need to edit the site's master page titled v4.master.
2. Add the reference to your Jquery library, and any additional code libraries including Bootstrap or CSS stylesheets.
3. To apply popovers, do that editing on a page you want features to appear on.
4. Create an html file with custom tags and css where you can edit the content of a popover.
5. For example, on your home page you want to have a popover on a header item.
6. Place a Content Editor web part on your page and link it to the html file with custom css tags.
7. Save the page and preview.
8. The source code libraries live in your master page, and are available to any page.
9. Anywhere you edit code in a Sharepoint page, should recognize the use of Jquery and Bootstrap functions.