{%- if prev %}
  <li id="relations-prev" title="Previous Chapter - {{ prev.title }}" data-toggle="tooltip">
    <a href="{{ prev.link|e }}" >
      <i class='glyphicon glyphicon-backward' style='opacity:0.9;'></i>
    </a>
  </li>
  {% if not next %}
    <li class="divider-vertical"></li>
  {% endif %}

{%- endif %}

{%- if next %}
  <li id="relations-next" title='Next Chapter - {{ next.title }}' data-toggle="tooltip" >              
    <a href="{{ next.link|e }}" >
        <i class='glyphicon glyphicon-forward' style='opacity:0.9;'></i>
    </a>
  </li>
  <li class="divider-vertical"></li>
{%- endif %}

<script>
  opts = {'placement':'bottom',
          'selector': '',
          'delay': { show: 100, hide: 50}
         };

  window.addEventListener('load', (event) => {
    $('#relations-prev').tooltip(opts);
    $('#relations-next').tooltip(opts);
  });
</script>
