Bootstrap 3.0 Popover Sample

by bryiantan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    <div class="row">  
                  
                <div class="col-lg-1">  
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77"   title="No task result for note"  data_toggle="popover" style="/*! width: 1px !important; */"><span class="close-popover float-right text-danger "></span></i>  
                    <div class="popper-content" style="display:none">  
                        <div class="form-group">  
                            <label title="Task name">Task name  
                            </label>  
                                <input type="text"  
                                       class="form-control">  
                            <label title="Message">  
                              Message  
                            </label>  
                            <input type="text"  
                                   class="form-control" placeholder="Limited to 100 Characters">  
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>  
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>  
                        </div>  
                        <button type="submit" class="btn btn-default btn-block">  
                            Submit  
                        </button>  
                    </div></div>  
                <div class="col-lg-1">  
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" title="No task result for review" data_toggle="popover" style="/*! width: 1px !important;...

JavaScript

$(function () {
    $('#firstButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    $('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
    $('#secondButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
});