<popper trigger="hover" :options="{placement: 'left'}">
  <div class="popper">
    <div>
      <b>Title</b>
    </div>
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt="" align="left">
    <span class="popper-content">Popper Content</span>
  </div>

  <a class="button is-primary" slot="reference">
    Left
  </a>
</popper>
Title
Popper Content
Left 
<popper trigger="hover" :options="{placement: 'right'}">
  <div class="popper">
    <div>
      <b>Title</b>
    </div>
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt="" align="left">
    <span class="popper-content">Popper Content</span>
  </div>

  <a class="button is-primary" slot="reference">
    Right
  </a>
</popper>
Title
Popper Content
Right 
<popper trigger="hover" :options="{placement: 'top'}">
  <div class="popper">
    <div>
      <b>Title</b>
    </div>
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt="" align="left">
    <span class="popper-content">Popper Content</span>
  </div>

  <a class="button is-primary" slot="reference">
    Top
  </a>
</popper>
Title
Popper Content
Top 
<popper trigger="hover" :options="{placement: 'bottom'}">
  <div class="popper">
    <div>
      <b>Title</b>
    </div>
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100" alt="" align="left">
    <span class="popper-content">Popper Content</span>
  </div>

  <a class="button is-primary" slot="reference">
    Bottom
  </a>
</popper>
Title
Popper Content
Bottom