         {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>


    <BS.Modal
      {...@props}
      title={title}
      className="teacher-edit-period-modal">

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



  getInitialState: ->
    warning: ''
    showModal: false

  close: ->
    @setState({showModal: false})

  open: ->
    @setState({showModal: true})

  performUpdate: ->
    if @isPeriodEmpty()
      # 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)
      @close()
    else
      @setState(warning: EMPTY_WARNING)

