Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Data Popover

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 344
    Comment on it

    Bootstrap Popover  :- 

    The popover is like tooltip, offering an extended view complete with a heading. For the popover to activate, a user simply needs to hover the cursor over the element. The content of the popover can be populated completely utilizing the Bootstrap Data API. This strategy requires a tooltip.

    Following are the two ways , through which you can add popover :-

    1. Via data attributes :- To include a popover, include data-toggle = "popover" to an anchor/button tag. The title of the anchor will be the content of a popover. As a matter of course, popover is set to best by the plugin.

    <a href = "#" data-toggle = "popover" title = "popover example">
       Hover over me
    </a>

    2. Via JavaScript :- Enable popovers via JavaScript using the following syntax −

    $('#identifier').popover(options)

    POPOVER EXAMPLE :-

    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container" style="width: 50%; margin: 130px auto">
       <button type = "button" class = "btn btn-default" title = "Popover title"  
          data-container = "body" data-toggle = "popover" data-placement = "left" 
          data-content = "Some content in Popover on left">
          
          Popover on left
       </button>
       
       <button type = "button" class = "btn btn-primary" title = "Popover title"  
          data-container = "body" data-toggle = "popover" data-placement = "top" 
          data-content = "Some content in Popover on top">
          
          Popover on top
       </button>
       
       <button type = "button" class = "btn btn-success" title = "Popover title"  
          data-container = "body" data-toggle = "popover" data-placement = "bottom" 
          data-content = "Some content in Popover on bottom">
          
          Popover on bottom
       </button>
       
       <button type = "button" class = "btn btn-warning" title = "Popover title"  
          data-container = "body" data-toggle = "popover" data-placement = "right" 
          data-content = "Some content in Popover on right">
          
          Popover on right
       </button>
       
    </div>
    
    <script>
       $(function (){
          $("[data-toggle = 'popover']").popover();
       });
    </script>
    
    </body>
    </html>

    OUTPUT :-

     

    Data Popover

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: