title: Matplotlib annotation text expanding outside axes
body: <p>I have a scatterplot with multiple points, sometimes overlapping, so there is a hover box annotation on each point (used the <a href="https://stackoverflow.com/a/47166787/3220769">solution here</a> to create this). To deal with the multiple points and sometimes long descriptions, there is a line break in the annotation. The problem is with multiple lines, the annotation box builds up instead of down making it go outside the axis like seen below. Is there a way to have the text start at the line right below the axis then build down into the plot?</p>
  
  <p>Relevant code:</p>
  
  <pre><code>import matplotlib.pyplot as plt
  import numpy as np; np.random.seed(1)
  
  x = np.random.rand(15)
  y = np.random.rand(15)
  names = np.array(list("ABCDEFGHIJKLMNO"))
  c = np.random.randint(1,5,size=15)
  
  norm = plt.Normalize(1,4)
  cmap = plt.cm.RdYlGn
  
  fig,ax = plt.subplots()
  sc = plt.scatter(x,y,c=c, s=100, cmap=cmap, norm=norm)
  
  annot = ax.annotate("", xy=(0.05, 0.95), xycoords='axes fraction',
                      bbox=dict(boxstyle="round", fc="w"),
                      zorder=1000)
  annot.set_visible(False)
  
  def update_annot(ind):
  
      pos = sc.get_offsets()[ind["ind"][0]]
      annot.xy = pos
      text = "{}".format("\n".join([f"{n}: {names[n]}" for n in ind["ind"]]))
      annot.set_text(text)
      annot.get_bbox_patch().set_facecolor(cmap(norm(c[ind["ind"][0]])))
      annot.get_bbox_patch().set_alpha(0.4)
  
  
  def hover(event):
      vis = annot.get_visible()
      if event.inaxes == ax:
          cont, ind = sc.contains(event)
          if cont:
              update_annot(ind)
              annot.set_visible(True)
              fig.canvas.draw_idle()
          else:
              if vis:
                  annot.set_visible(False)
                  fig.canvas.draw_idle()
  
  fig.canvas.mpl_connect("motion_notify_event", hover)
  
  plt.show()
  </code></pre>
  
  <p>How it looks with one line text in annotation</p>
  
  <p><a href="https://i.stack.imgur.com/G4GcX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4GcX.png" alt="enter image description here"></a></p>
  
  <p>How it looks with two line text in annotation (hover point overlaps two points). Would ideally have the <code>0: A</code> where <code>8: I</code> is, then <code>8: I</code> below it</p>
  
  <p><a href="https://i.stack.imgur.com/t5M0v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5M0v.png" alt="enter image description here"></a></p>