jquery - Bootstrap Hover Pop ups for hyperlink buttons -

first post on here if isn't in right spot or theres issues let me know!

i using bootstrap make main page of sharepoint 2013 page. have couple of buttons used navigate different pages.

i add hover feature when 'hovered over' text box, image, etc appears when clicked user taken pre determined location.

so far using:

<nav>       <ul class="nav nav-justified">         <li class="active"><a href="#">home</a></li>         <li><a href="url">business architecture</a></li>         <li><a href="url">operations</a></li>         <li><a href="url">chnage management</a></li>         <li><a href="url">assist</a></li>         </ul>     </nav> 

please note haven't touched 'home' button yet, others. have hover colour turned on via:

<style type=text/css> a:link { color: grey/*the color of link*/} a:visited { color: #grey/*the color of visited link*/} a:hover { color: black /*the color of mouseover or 'hover' link*/} body { color: #454545/*the color of other text within body of page*/} </style> 

the rest built bootstrap existing templates im still new , getting used html/css.

thanks matt

you can check out built in popover js feature. refer bootstrap 3 docs available options. see working example snippet.

var originalleave = $.fn.popover.constructor.prototype.leave;  $.fn.popover.constructor.prototype.leave = function(obj) {    var self = obj instanceof this.constructor ? obj : $(obj.currenttarget)[this.type](this.getdelegateoptions()).data('bs.' + this.type);    var container, timeout;      originalleave.call(this, obj);      if (obj.currenttarget) {      container = $(obj.currenttarget).siblings('.popover');      timeout = self.timeout;      container.one('mouseenter', function() {          cleartimeout(timeout);          container.one('mouseleave', function() {          $.fn.popover.constructor.prototype.leave.call(self, self);        });      });    }  };      $('body').popover({    selector: '[data-popover]',    trigger: 'click hover',    placement: 'auto',    html: "true",    delay: {      show: 50,      hide: 400    }  });

body {    color: #454545;    /*the color of other text within body of page*/  }  a:link {    color: grey;    /*the color of link*/  }  a:visited {    color: grey;    /*the color of visited link*/  }  a:hover {    color: black;    /*the color of mouseover or 'hover' link*/  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <nav>    <ul class="nav nav-justified">      <li class="active"><a href="#" data-popover="true" title="home" data-content="<a href='http://example.com'>home</a>">home</a>      </li>      <li><a href="url" data-popover="true" title="business architecture" data-content="<a href='http://example.com'>business architecture</a>">business architecture</a>      </li>      <li><a href="url" data-popover="true" title="operations" data-content="<a href='http://example.com'>operations</a>">operations</a>      </li>      <li><a href="url" data-popover="true" title="change management" data-content="<a href='http://example.com'>change management</a>">change management</a>      </li>      <li><a href="url" data-popover="true" title="assist" data-content="<a href='http://example.com'>assist</a>">assist</a>      </li>    </ul>  </nav>