<ul class="post-categories">
     <li><a id="more-cats" href="">CLICK ME</a>
          <div id="tooltip" class="tooltip">
               <div class="tooltip-inner">
                    <ul>
                         <li><a href="">STRATEGY</a></li>
                         <li><a href="">SOCIAL MEDIA</a></li>
                    </ul>
               </div>
          </div>
     </li>
</ul>
body { max-width: 600px; min-height: 400px; margin: 50px auto; }

.post-categories > li { display: inline-block; }
.post-categories li a {
  padding: 6px 10px;
  background: #121921;
  color: #fff;
  text-decoration: none;
}
.post-categories > li + li { margin-left: 8px; }

.tooltip { display: none; margin-top: 10px; }
.tooltip .tooltip-inner { background: #121921; color: #fff; }

.tooltip .tooltip-inner:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  right: 6px;
  border-width: 0 10px 10px 10px;
  border-color: transparent;
  border-bottom-color: #121921;
  border-style: solid;
}

.tooltip .tooltip-inner li a {
  display: block;
}
$(function () {
     var element = document.getElementById('more-cats');
     var dropdown = document.getElementById('tooltip');

     var catsTooltip = new Popper ( element, dropdown, {
          placement: 'bottom-end'
     });

     $(element).click(function(e) {
          $(dropdown).toggle();
          catsTooltip.scheduleUpdate();
          e.preventDefault();
     });

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
  2. https://unpkg.com/popper.js@1.12.5/dist/umd/popper.min.js