Html bootstrap tooltip in mvc asp.net

Bootstrap tooltip

HTML Code

 @{  
   ViewBag.Title = "ToolTip";  
   var PopoverHtmlString = a"<div style='width:100px; height:100px'>Your Html Content</div><hr/><a href='javascript:void(0);' class='TipClose'>close</a>";  
 }  
 <style type="text/css">  
   .popover  
   {  
     width: 200px;  
   }  
 </style>  
 <h2>  
   ToolTip</h2>  
 <button class="btn btn-primary" title="Your title"  
           data-placement="right" data-html="true" data-toggle="popover" data-content='@PopoverHtmlString' id="idBtnClickMe" >  
   Click Me</button>  
 @section scripts {  
   @Scripts.Render("~/Views/Home/ToolTip.js")  
 }  

Jquery

 var ToolTip = new function () {  
   var self = this;  
   this.Ready = function () {  
     $('[data-toggle="popover"]').popover();  
     $("#idBtnClickMe").click(function () {  
       $(this).popover("show");  
     });  
     $("body").on("click", ".TipClose", function () {  
       $("#idBtnClickMe").popover("hide");  
     });  
     $('[data-toggle="popover"]').on("hidden.bs.popover", function () {  
       $(this).data("bs.popover").inState.click = false  
     });  
   }  
 }  
 $(document).ready(ToolTip.Ready);