A Pen by betul.

Bootstrap-setting-for-tooltip-and-popover.markdown

Bootstrap setting for tooltip and popover

For multiple elements. Bootstrap : http://getbootstrap.com/ ; Bootstrap CDN : http://bootstrapcdn.com

A Pen by betul on CodePen.

License.

index.html

<h1 style='text-align:center'><strong>Bootstrap Setting</strong><br/>
  Tooltip and Popover for multiple elements</h1>

<div id='multiple_elements'>
  <h2>TOOLTIP</h2>
  <h4>Just hover on the element</h4>
  <div class='ole' data-toggle='tooltip' data-placement='left' data-original-title='this is a tooltip on the left'>
    OLE
  </div>

  <div class='ole two' data-toggle='tooltip' data-placement='top' data-original-title='this is a tooltip on the top'>
    OLE
  </div>

  <div class='ole three' data-toggle='tooltip' data-placement='bottom' data-original-title='this is a tooltip on the bottom'>
    OLE
  </div>

  <div class='ole four' data-toggle='tooltip' data-placement='right' data-original-title='this is a tooltip on the right'>
    OLE
  </div>
  
</div>
<div id='multiple_elements2'>
  
  <h2>POPOVER</h2>
  <h4>Click the element to toggle the popover</h4>
  <div class='elo four' data-toggle='popover' data-placement='left' data-original-title='this is a popover on the left' data-content='the paragraph within the popover is using data-content parameter'>
    ELO
  </div>

  <div class='elo three' data-toggle='popover' data-placement='top' data-original-title='this is a popover on the top' data-content='the paragraph within the popover is using data-content parameter'>
    ELO
  </div>

  <div class='elo two' data-toggle='popover' data-placement='bottom' data-original-title='this is a popover on the bottom' data-content='the paragraph within the popover is using data-content parameter'>
   ELO
  </div>

  <div class='elo' data-toggle='popover' data-placement='right' data-original-title='this is a popover on the right'data-content='the paragraph within the popover is using data-content parameter'>
    ELO
  </div>
  
</div>
<br/><br/><br/><br/><br/><br/>

script.js

/*--We can use {body} or the element class/id that wraps the elements which using tooltip/popover. Just include the data-[] parameter in each element that needs it.--*/
//It's like jQuery UI setting but with tiny additional parameter
$(window).load(function(){
//tooltip, by default, activated by hover event
 $('body').tooltip({   
   selector: '[data-toggle=tooltip]',
   container: 'body'
 });

//popover, by default, activated with clicking {toggle}
 $('body').popover({   
   selector: '[data-toggle=popover]',
   container: 'body'
 });
});

style.css

body 
{
  background :#eee;
}
.ole,.elo
{
  background:lime;
  padding:20px;
  display:inline-block;
  font-family:courier;
  font-size:2em;
  border-radius:20px;
  font-weight:bold;
  border:5px solid #555;
  cursor:pointer;
  transition:all 0.3s;
}
.two
{ 
  background:orange;  
}
.three
{
  background:yellow;
}
.four
{
  background:violet;
}
.ole:hover
{
  background:black;
  color:white;
}
.elo 
{
  transition:all 0.1s;
}
.elo:active
{
  background:white;
}
#multiple_elements,#multiple_elements2
{
  padding:30px 0 10px 0;
  text-align:center;
}