     </BS.Modal>
 
   render: ->
-    <BS.OverlayTrigger
-    rootClose={true}
-    trigger='click'
-    ref='overlay'
-    overlay={@renderForm()}>
-        <BS.Button bsStyle='link' className='edit-course'>
-          <i className='fa fa-pencil' /> Rename Course
-        </BS.Button>
-    </BS.OverlayTrigger>
+    <span>
+      <BS.Button onClick={@open} bsStyle='link' className='edit-course'>
+        <i className='fa fa-pencil' /> Rename Course
+      </BS.Button>
+      {@renderForm()}
+    </span>
 
 module.exports = RenameCourse


  getInitialState: ->
    course_name: @props.course.name

  validate: (name) ->
    error = CourseStore.validateCourseName(name, @props.course.name)

    unless @state.invalid
      CourseActions.save(@props.courseId, course: {name: @state.course_name})
      CourseStore.once 'saved', ->
        @close()

  renderForm: ->
    formClasses = classnames 'modal-body', 'teacher-edit-course-form', 'is-invalid-form': @state?.invalid
