Displaying Course Drip Release Dates

Dripped and scheduled course content can now have its specific release date show in theme templates

The latest versions of the following themes can now display the release date for dripped and scheduled course content in a tooltip that renders while hovering over the calendar icon shown alongside their titles:

  • momentum_product v7.0.2

  • premier_product v7.9.2

If you are developing a custom product theme and would like to offer this functionality as well, you can add the following

{% if category.drip_release_date %}
  <span class="drip-tooltip" data-tooltip="{{ category.drip_release_date | date: '%b %d, %Y' }}">
    <i class="fa fa-calendar"></i>
  </span>
{% else %}
  <i class="fa fa-calendar"></i>
{% endif %}

And ensure that you've added the following styles to your stylesheet

  .drip-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;

    &::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      right: 35%;
      transform: translateX(35%);
      padding: 6px 10px;
      background: #30373d;
      color: #fff;
      font-size: 12px;
      white-space: nowrap;
      border-radius: 4px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
      pointer-events: none;
      z-index: 999999;
      margin-bottom: 6px;
    }

    &:hover::after {
      opacity: 1;
      visibility: visible;
    }
  }

This will produce the desired tooltip

Last updated