Fixes for popover behavior.

app/styles/play/level/tome/tome.sass

@@ -6,18 +6,33 @@
 
   > .popover
     // Only those popovers which are our direct children (spell documentation)
-    left: auto !important
+    max-width: 600px
-    top: auto !important
-    right: 100%
-    bottom: 151px
-    @include user-select(text)
-    // Wish I could set max-width and max-height (and override Bootstrap's stuff)
-    // but without explicitly setting height, child overflow-y: scroll doesn't work
-    min-width: 100%
-    height: 60%
 
     &.pinned
-      @include box-shadow(0 0 500px white)
+      left: auto !important
+      top: auto !important
+      right: 100%
+      bottom: 151px
+      @include user-select(text)
+      // Wish I could set max-width and max-height (and override Bootstrap's stuff)
+      // but without explicitly setting height, child overflow-y: scroll doesn't work
+      min-width: 100%
+      height: 60%
+
+      .arrow
+        display: none
+
+      .close
+        position: absolute
+        top: 5%
+        right: 5%
+        font-size: 28px
+        font-weight: bold
+        @include opacity(0.6)
+        text-shadow: 0 1px 0 white
+
+        &:hover
+          @include opacity(1)
 
   .popover
     padding: 10px 10px 30px 10px

app/views/play/level/tome/spell_list_tab_entry_view.coffee

@@ -64,7 +64,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
     @$el.find('code').popover(
       animation: true
       html: true
-      placement: 'left'
+      placement: 'bottom'
       trigger: 'hover'
       content: @formatPopover doc
       container: @$el.parent()

app/views/play/level/tome/spell_palette_entry_view.coffee

@@ -64,6 +64,8 @@ module.exports = class SpellPaletteEntryView extends View
 
   subscriptions:
     'surface:frame-changed': "onFrameChanged"
+    'tome:palette-hovered': "onPaletteHovered"
+    'tome:palette-pin-toggled': "onPalettePinToggled"
 
   events:
     'mouseenter': 'onMouseEnter'
@@ -100,13 +102,13 @@ module.exports = class SpellPaletteEntryView extends View
     @$el.popover(
       animation: false
       html: true
-      placement: 'left'
+      placement: 'top'
       trigger: 'manual'  # Hover, until they click, which will then pin it until unclick.
       content: @formatPopover()
       container: '#tome-view'
     )
     @$el.on 'show.bs.popover', =>
-      Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name
+      Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @
 
   formatPopover: ->
     content = popoverTemplate doc: @doc, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? [])
@@ -143,31 +145,45 @@ module.exports = class SpellPaletteEntryView extends View
     # Make sure the doc has the updated Thang so it can regenerate its prop value
     @$el.data('bs.popover').options.content = @formatPopover()
     @$el.popover('setContent')
-    @$el.popover 'show' unless @popoverPinned
+    @$el.popover 'show' unless @popoverPinned or @otherPopoverPinned
 
   onMouseLeave: (e) ->
-    @$el.popover 'hide' unless @popoverPinned
+    @$el.popover 'hide' unless @popoverPinned or @otherPopoverPinned
 
   togglePinned: ->
     if @popoverPinned
       @popoverPinned = false
       @$el.add('#tome-view .popover').removeClass 'pinned'
+      $('#tome-view .popover .close').remove()
       @$el.popover 'hide'
     else
       @popoverPinned = true
+      @$el.popover 'show'
       @$el.add('#tome-view .popover').addClass 'pinned'
+      x = $('<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>')
+      $('#tome-view .popover').append x
+      x.on 'click', @onClick
+    Backbone.Mediator.publish 'tome:palette-pin-toggled', entry: @, pinned: @popoverPinned
 
-  onClick: (e) ->
+  onClick: (e) =>
     unless @popoverPinned
       $(e.target).selectText()
       e.stopPropagation()  # don't re-focus editor since we might want to select text
     @togglePinned()
-    Backbone.Mediator.publish 'tome:palette-clicked', thang: @thang, prop: @doc.name
+    Backbone.Mediator.publish 'tome:palette-clicked', thang: @thang, prop: @doc.name, entry: @
 
   onFrameChanged: (e) ->
     return unless e.selectedThang?.id is @thang.id
     @options.thang = @thang = e.selectedThang  # Update our thang to the current version
 
+  onPaletteHovered: (e) ->
+    return if e.entry is @
+    @togglePinned() if @popoverPinned
+
+  onPalettePinToggled: (e) ->
+    return if e.entry is @
+    @otherPopoverPinned = e.pinned
+
   destroy: ->
     $('.popover.pinned').remove() if @popoverPinned  # @$el.popover('destroy') doesn't work
     @togglePinned() if @popoverPinned