title: Is there a way to use a Bootstrap popover inside a Bootstrap modal?
body: <p>I'm in an nHibernate-driven MVC environment. My view calls up several nested HTML content tabs, and in those tabs I have Modal pop-ups based on clicked items in displayed grids.</p>
  
  <p>I'd like to use the Bootstrap popover tooltip on the fields inside that modal, but I can't seem to get them to work.</p>
  
  <p>The main View is:</p>
  
  <pre><code>&lt;%@ Page Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage&lt;CTICNWv4.Framework.AppContext.ICurrentApplicationContext&gt;" %&gt;
  
  &lt;asp:Content ContentPlaceHolderID="TitleContent" ID="tc" runat="server"&gt;
      Chicago Title School of Real Estate Management
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ContentPlaceHolderID="PageContent" ID="pc" runat="server"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span12" style="text-align: right;"&gt;&lt;a href="/Employee/#!Schools"&gt;&lt; Back to Employee Dashboard&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row-fluid" id="divWOW"&gt;
          &lt;div class="span12"&gt;
              &lt;h1&gt;School Management&lt;/h1&gt;
  
              &lt;div id="ng-app" ng-app="schoolManager" class="tabbable tabs-left"&gt;
                  &lt;ul ng-controller="NavCtrl" class="nav nav-tabs"&gt;
                      &lt;li ng-class="{ active: isActive('/scheduling/active') }"&gt;&lt;a href="#/scheduling/active"&gt;Scheduling&lt;/a&gt;&lt;/li&gt;
                      &lt;li ng-class="{ active: isActive('/classes') }"&gt;&lt;a href="#/classes"&gt;Classes&lt;/a&gt;&lt;/li&gt;
                      &lt;li ng-class="{ active: isActive('/venues') }"&gt;&lt;a href="#/venues"&gt;Venues&lt;/a&gt;&lt;/li&gt;
                      &lt;li ng-class="{ active: isActive('/instructors') }"&gt;&lt;a href="#/instructors"&gt;Instructors&lt;/a&gt;&lt;/li&gt;
                      &lt;li ng-class="{ active: isActive('/closed-classes') }"&gt;&lt;a href="#/closed-classes"&gt;Closed Classes&lt;/a&gt;&lt;/li&gt;
                      &lt;li ng-class="{ active: isActive('/scheduling/canceled') }"&gt;&lt;a href="#/scheduling/canceled"&gt;Canceled Classes&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div ng-view growl class="tab-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ContentPlaceHolderID="AdditionalScripts" ID="as" runat="server"&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/bootstrap-addons/ui-bootstrap-tpls-0.6.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/bootstrap-addons/jquery.bootstrap-growl.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/ng-v4/ng-v4.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/schoolmanager/app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/schoolmanager/controllers.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/scripts/schoolmanager/services.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          window.tenant = '&lt;%= V4AppCtx.Current.TenantInfo.Operation %&gt;';
      &lt;/script&gt;
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ContentPlaceHolderID="AdditionalContent" ID="ac" runat="server"&gt;
      &lt;style type="text/css"&gt;
          .nav, .pagination, .carousel a {
              cursor: pointer;
          }
      &lt;/style&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>And the HTML sub-tab code page is:</p>
  
  <pre><code>&lt;div ng-hide="resourcesLoaded &gt;= 4" class="alert alert-warning"&gt;
      &lt;h4&gt;Loading...&lt;/h4&gt;
      &lt;div class="progress progress-striped active"&gt;
          &lt;div class="bar" style="width: 1000%;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div ng-show="resourcesLoaded &gt;= 4"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span6"&gt;
              &lt;button class="btn" ng-click="newClass()" ng-disabled="!options.createNew"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;New Class&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="span6"&gt;
              &lt;input type="text" class="pull-right" placeholder="Search" ng-model="filter" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;table class="table table-striped table-bordered table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Course Date&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Venue City&lt;/th&gt;
                  &lt;th&gt;Clock Hrs.&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody highlight highlight-selector="tr#i_{{identifier}}&gt;td"&gt;
              &lt;tr ng-repeat="item in classes | filter:filter | orderBy:courseSort:true | startAt:(currentPage-1)*pageSize | limitTo:pageSize"
                  ng-click="editClass(item)" class="clickable" id="i_{{item.ScheduleId}}"&gt;
                  &lt;td&gt;{{item.Class.CourseDate}}&lt;/td&gt;
                  &lt;td&gt;({{item.Class.CourseNum}}) {{item.Class.ClassName}}&lt;/td&gt;
                  &lt;td&gt;{{item.Class.VenueCity}}&lt;/td&gt;
                  &lt;td&gt;{{item.Class.ClockHrs}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div class="pull-right"&gt;
          &lt;pagination total-items="classes.length" page="currentPage" items-per-page="pageSize"&gt;&lt;/pagination&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/ng-template" id="class-form.html"&gt;
      &lt;form name="form" novalidate ng-submit="ok('save')"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 ng-hide="!item.ScheduleId || closeout.show"&gt;Edit Class&lt;/h3&gt;
              &lt;h3 ng-hide="!closeout.show"&gt;Closeout&lt;/h3&gt;
              &lt;h3 ng-hide="item.ScheduleId"&gt;New Class&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-body" ng-hide="closeout.show"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;div class="control-group" ng-class="{error:form.course.$invalid &amp;&amp; form.course.$dirty}"&gt;
                          &lt;label for="course"&gt;Course *&lt;/label&gt;
                          &lt;select id="course" name="course" ng-model="item.Class.ClassId" class="input-block-level" ng-options="c.ClassId as ('(' + c.CourseNum + ') ' + c.ClassName) for c in courses | filter:{Active:true}" required 
                          title="Select a Course from the list. This field is required."
                          data-content="Select a Course from the list. This field is required."
                          rel="popover" 
                          data-placement="right" 
                          data-original-title="Course"&gt;&lt;/select&gt;
                          &lt;span ng-show="form.course.$dirty"&gt;
                              &lt;span ng-show="form.course.$error.required" class="help-inline"&gt;Please choose a course&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;div class="control-group" ng-class="{error:form.venue.$invalid &amp;&amp; form.venue.$dirty}"&gt;
                          &lt;label for="venue"&gt;Venue *&lt;/label&gt;
                          &lt;select id="venue" name="venue" ng-model="item.Class.VenueId" class="input-block-level" ng-options="v.VenueId as (v.Name + ' (' + v.City + ')') for v in venues | filter:{Active:true}" required 
                          title="Select a Venue from the list. This field is required."
                          data-content="Select a Venue from the list. This field is required."
                          rel="popover" 
                          data-placement="right" 
                          data-original-title="Venue"&gt;&lt;/select&gt;
                          &lt;span ng-show="form.venue.$dirty"&gt;
                              &lt;span ng-show="form.venue.$error.required" class="help-inline"&gt;Please choose a venue&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span3"&gt;
                      &lt;div class="control-group" ng-class="{error:form.date.$invalid &amp;&amp; form.date.$dirty}"&gt;
                          &lt;label for="date"&gt;Date *&lt;/label&gt;
                          &lt;div class="input-prepend input-block-level"&gt;
                              &lt;span class="add-on"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;input id="date" name="date" type="text" ng-model="item.Class.CourseDate" required ng-pattern="/^[0-9]{1,2}[/-][0-9]{1,2}[/-][0-9]{2,4}$/" 
                              placeholder="MM/DD/YYYY" 
                              title="Please enter the class date, formatted as Month(2 Digit)/Day(2 Digit)/Year(4 Digit). This field is required."
                              data-content="Please enter the class date, formatted as Month(2 Digit)/Day(2 Digit)/Year(4 Digit). This field is required.
  
  Example: 12/21/2014"
                              rel="popover" 
                              data-placement="right" 
                              data-original-title="Date"&gt;
                          &lt;/div&gt;
                          &lt;span ng-show="form.date.$dirty"&gt;
                              &lt;span ng-show="form.date.$error.required" class="help-inline"&gt;Date is required&lt;/span&gt;
                              &lt;span ng-show="form.date.$error.pattern" class="help-inline"&gt;Invalid date&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span3"&gt;
                      &lt;div class="control-group" ng-class="{error:form.time.$invalid &amp;&amp; form.time.$dirty}"&gt;
                          &lt;label for="time"&gt;Time *&lt;/label&gt;
                          &lt;div class="input-prepend input-block-level"&gt;
                              &lt;span class="add-on"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;input id="time" name="time" type="text" ng-model="item.Class.StartTime" required ng-pattern="/^[0-9]{1,2}:[0-9]{1,2}[ ]*[AaPp][Mm]$/" 
                              placeholder="HH:MM AM/PM" 
                              title="Please enter the class time, formatted as Hours:Minutes AM or PM. This field is required, and the 'AM' or 'PM' is required."
                              data-content="Please enter the class time, formatted as Hours:Minutes AM or PM. This field is required, and the 'AM' or 'PM' is required.
  
  Example: 08:15 AM
  Example: 03:42 PM"
                              rel="popover" 
                              data-placement="right" 
                              data-original-title="Time"&gt;
                          &lt;/div&gt;
                          &lt;span ng-show="form.time.$dirty"&gt;
                              &lt;span ng-show="form.time.$error.required" class="help-inline"&gt;Time is required&lt;/span&gt;
                              &lt;span ng-show="form.time.$error.pattern" class="help-inline"&gt;Invalid time&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span3"&gt;
                      &lt;div class="control-group" ng-class="{error:form.cost.$invalid &amp;&amp; form.cost.$dirty}"&gt;
                          &lt;label for="cost"&gt;Cost&lt;/label&gt;
                          &lt;div class="input-prepend input-block-level"&gt;
                              &lt;span class="add-on"&gt;$&lt;/span&gt;
                              &lt;input id="cost" name="cost" type="text" ng-model="item.Class.Cost" ng-pattern="/^[0-9]*[.]*[0-9]*$/" 
                              placeholder="#,###.##" 
                              title="Please enter the cost of the class. The cost should be entered as a monetary amount. This field is not required."
                              data-content="Please enter the cost of the class. The cost should be entered as a monetary amount. This field is not required."
                              rel="popover" 
                              data-placement="right" 
                              data-original-title="Cost"&gt;
                          &lt;/div&gt;
                          &lt;span ng-show="form.cost.$dirty"&gt;
                              &lt;span ng-show="form.cost.$error.required" class="help-inline"&gt;Cost is required&lt;/span&gt;
                              &lt;span ng-show="form.cost.$error.pattern" class="help-inline"&gt;Invalid amount&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span3"&gt;
                      &lt;label&gt;&amp;nbsp;&lt;/label&gt;
                      &lt;label for="private" class="checkbox"&gt;
                          &lt;input type="checkbox" name="private" ng-model="item.Class.Private" /&gt; Private
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;div class="control-group" ng-class="{error:form.comment.$invalid &amp;&amp; form.comment.$dirty}"&gt;
                          &lt;label for="comment"&gt;Compliance Comment&lt;/label&gt;
                          &lt;textarea id="comment" name="comment" type="text" ng-model="item.Class.ComplianceComment" class="input-block-level" rows="3" maxlength="128" 
                          placeholder="Enter Compliance content here." 
                          title="Please use this area to enter any Compliance notes for this class. This field is not required."
                          data-content="Please use this area to enter any Compliance notes for this class. This field is not required."
                          rel="popover" 
                          data-placement="right" 
                          data-original-title="Compliance Comment"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;label&gt;Instructors&lt;/label&gt;
                      &lt;table class="table table-condensed table-bordered"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Instructor&lt;/th&gt;
                                  &lt;th&gt;Primary?&lt;/th&gt;
                                  &lt;th&gt;Show Contact Info?&lt;/th&gt;
                                  &lt;th&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr ng-repeat="inst in item.Instructors"&gt;
                                  &lt;td&gt;{{inst.FirstName}} {{inst.LastName}}&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="checkbox" ng-model="inst.Primary"&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="checkbox" ng-model="inst.ShowContactInfo"&gt;&lt;/td&gt;
                                  &lt;td class="centered"&gt;&lt;a class="btn btn-danger btn-mini" ng-click="removeInstructor(inst)"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt; Remove&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;&lt;select id="instructor" name="instructor" class="input-block-level" ng-model="newInstructor.InstructorId" ng-options="inst.InstructorId as inst.FullName for inst in instructors | filter:{Active:true}"
                                  title="Please select an Instructor from the list. This field is not required."
                                  data-content="Please select an Instructor from the list. This field is not required."
                                  rel="popover" 
                                  data-placement="right" 
                                  data-original-title="Compliance Comment"&gt;&lt;/select&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="checkbox" ng-model="newInstructor.Primary"&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="checkbox" ng-model="newInstructor.ShowContactInfo"&gt;&lt;/td&gt;
                                  &lt;td class="centered"&gt;&lt;a class="btn btn-primary btn-mini" ng-click="addInstructor()"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; Add&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer" ng-hide="closeout.show"&gt;
              &lt;span ng-hide="!item.ScheduleId" class="pull-left"&gt;
                  &lt;span ng-show="options.cancel"&gt;&lt;confirm-button text="Cancel Class" body="Are you sure you want to cancel this class?  An email will be sent to the RSVP'd students." action="ok('cancel-class')"&gt;&lt;/confirm-button&gt;&lt;/span&gt;
                  &lt;button class="btn" disabled="true" ng-show="!options.cancel"&gt;Cancel Class&lt;/button&gt;
                  &lt;button class="btn" ng-click="showCloseOut()" ng-disabled="!options.closeOut" type="button"&gt;Closeout&lt;/button&gt;
              &lt;/span&gt;
  
              &lt;span ng-show="form.$invalid"&gt;
                  * Please enter all required information before saving.
              &lt;/span&gt;
              &lt;button class="btn btn-primary" ng-disabled="form.$invalid" type="submit"&gt;Save&lt;/button&gt;
              &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-body" ng-hide="!closeout.show"&gt;
              &lt;div ng-show="!closeout.closingOut &amp;&amp; !closeout.closedOut"&gt;
                  &lt;p&gt;
                      Please verify (and update as needed) the payment and completion status for the following students. 
                      This list only shows students who have not cancelled their RSVPs and signed-in on the day of class.
                  &lt;/p&gt;
  
                  &lt;div ng-show="!closeout.rsvps" class="alert alert-info"&gt;
                      Loading students...
                  &lt;/div&gt;
  
                  &lt;div ng-show="closeout.rsvps &amp;&amp; closeout.rsvps.length == 0" class="alert alert-warning"&gt;
                      No students for this class.
                  &lt;/div&gt;
  
                  &lt;table class="table table-condensed" ng-show="closeout.rsvps &amp;&amp; closeout.rsvps.length &gt; 0"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Student Name&lt;/th&gt;
                              &lt;th class="centered"&gt;Paid?&lt;/th&gt;
                              &lt;th class="centered"&gt;Completed?&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr ng-repeat="rsvp in closeout.rsvps"&gt;
                              &lt;td&gt;{{rsvp.FirstName}} {{rsvp.LastName}}&lt;/td&gt;
                              &lt;td class="centered"&gt;&lt;input type="checkbox" ng-model="rsvp.Paid" disabled&gt;&lt;/td&gt;
                              &lt;td class="centered"&gt;&lt;input type="checkbox" ng-model="rsvp.Completed"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
                  &lt;p&gt;
                      &lt;strong&gt;If you are finished verifying the information above, you may proceed to Closeout this class or 
                      Cancel (and return to the previous screen).&lt;/strong&gt;
                  &lt;/p&gt;
  
                  &lt;div class="alert alert-info"&gt;
                      &lt;h4&gt;Note:&lt;/h4&gt;
                      Only students who paid for and completed the class will receive a certificate and notification thereof.
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div ng-show="closeout.closingOut &amp;&amp; !closeout.closedOut"&gt;
                  &lt;div class="alert alert-info"&gt;
                      Please wait while the class is closed out...
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div ng-show="closeout.closedOut"&gt;
                  &lt;p&gt;The Class has been closed. Any students who attended, paid for and completed the class will be receiving a Thank You email with information on retreiving their certificate.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-footer" ng-hide="!closeout.show"&gt;
              &lt;button type="button" class="btn btn-primary" ng-click="doCloseOut()" ng-disabled="!closeout.rsvps" ng-hide="closeout.closingOut || closeout.closedOut"&gt;Closeout&lt;/button&gt;
              &lt;a href="" class="btn btn-warning" ng-click="cancelCloseOut()" ng-hide="closeout.closingOut || closeout.closedOut"&gt;Cancel&lt;/a&gt;
              &lt;a href="" class="btn btn-primary" ng-click="ok('closedout')" ng-show="closeout.closedOut"&gt;OK&lt;/a&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $('[data-toggle="popover"]').popover({ container: ".modal-body" });
      $('#course').popover({ trigger: "hover" });
      $('#venue').popover({ trigger: "hover" });
      $('#date').popover({ trigger: "hover" });
      $('#time').popover({ trigger: "hover" });
      $('#cost').popover({ trigger: "hover" });
      $('#comment').popover({ trigger: "hover" });
      $('#instructor').popover({ trigger: "hover" });
  &lt;/script&gt;
  </code></pre>