Twig.js Playground

HTML

<script src="http://rc.foundryjs.com/twig/twig.js"></script>
<script type="text/twig" id="rev">
    {{ "a quick brown fox"|backwords }}
</script>

<script type="text/twig" id="include">
    include template inline: 
    <b>{% include "rev" %}</b>
</script>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>

<style>
  .popup {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      position: relative;
      display: inline-block;
      cursor: pointer;
  }

  .elements{
	  background-color: #555;
      visibility: hidden;
      text-align: center;
      z-index: 1;
      color: #fff;
  }
  
  .container {
  	border: 1px solid #555;
  	display: inline-block;
    height: 30px;
    width: 100px;
  }
</style>

<script>
  $(document).ready(e => {
    $('.inner-item').click(function(e) {
    	console.log(event.target.innerHTML);
        console.log($(this).parent());
        
        var holder = $(this).parent()
          .parent()
          .prev();
        holder.empty().prepend(this.dataset.title);
    });

    $('.container').click(function (e) {
       $(event.target).next().css({
       		'visibility': 'visible',
            'position'  : 'absolute',
            'width'     : event.target.offsetWidth,
            'left'      : $(this).offset().left,
            'top'       : $(this).offset().top + $(this).height() + 5
       }).show();
       e.stopPropagation();
    });

    $(document).click(e => $(".elements").hide());
  });
</script>

<div>
  <div class="container"></div>
  <div class="elements">
      <ul>
          <li class="inner-item" data-value="1" data-title="">1</li>
          <li class="inner-item" data-value="2" data-title="">2</li>
          <li class="inner-item" data-value="<input></input>" data-title="2">4</li>
      </ul>
  </div>
</div>