         {deleteButton if @isPeriodEmpty()}
       </div>
 
-
-
     </BS.Modal>
 
   render: ->
-    <BS.OverlayTrigger
-      ref='overlay'
-      rootClose={true}
-      trigger='click'
-      overlay={@renderForm()}>
-        <BS.Button bsStyle='link' className='edit-period'>
-          <i className='fa fa-trash-o' />
-          Delete <CourseGroupingLabel courseId={@props.courseId}/>
-        </BS.Button>
-    </BS.OverlayTrigger>
+    <span>
+      <BS.Button onClick={@open} bsStyle='link' className='edit-period'>
+        <i className='fa fa-trash-o' />
+        Delete <CourseGroupingLabel courseId={@props.courseId}/>
+      </BS.Button>
+      {@renderForm()}
+    </span>


  getInitialState: ->
    warning: ''

  performUpdate: ->
    if @isPeriodEmpty()
      @refs.overlay.hide()
      # tab to be deleted cannot be activeTab unless first, so select previous or first
      @props.selectPreviousTab()
      id = @props.activeTab.id
      PeriodActions.delete(id, @props.courseId)
    else
      @setState(warning: EMPTY_WARNING)



    <BS.Modal
      {...@props}
      show={@state.showModal}
      onHide={@close}
      className="teacher-edit-period-modal">

      <BS.Modal.Header closeButton>
        <BS.Modal.Title>{title}</BS.Modal.Title>
      </BS.Modal.Header>

      <div className='modal-body teacher-edit-period-form'>

