<span id="rateMe">

  <i class="fas fa-star py-2 px-1 rate-popover" data-index="0" data-html="true" data-toggle="popover" data-placement="top" title="Very bad"></i>

  <i class="fas fa-star py-2 px-1 rate-popover" data-index="1" data-html="true" data-toggle="popover" data-placement="top" title="Poor"></i>

  <i class="fas fa-star py-2 px-1 rate-popover" data-index="2" data-html="true" data-toggle="popover" data-placement="top" title="OK"></i>

  <i class="fas fa-star py-2 px-1 rate-popover" data-index="3" data-html="true" data-toggle="popover" data-placement="top" title="Good"></i>

  <i class="fas fa-star py-2 px-1 rate-popover" data-index="4" data-html="true" data-toggle="popover" data-placement="top" title="Excellent"></i>

</span>

.rate-popover {

  cursor: pointer;

}

var $stars;

​

jQuery(document).ready(function ($) {

​

  // Custom whitelist to allow for using HTML tags in popover content

  var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

  myDefaultWhiteList.textarea = [];

  myDefaultWhiteList.button = [];

​

  $stars = $('.rate-popover');

  $stars.on('mouseover', function () {

    var index = $(this).attr('data-index');

    markStarsAsActive(index);

  });

  function markStarsAsActive(index) {

    unmarkActive();

    for (var i = 0; i <= index; i++) {

      $($stars.get(i)).addClass('amber-text');

    }

  }

​

  function unmarkActive() {

    $stars.removeClass('amber-text');

  }

  $stars.on('click', function () {

    $stars.popover('hide');

  });

​

  // Submit, you can add some extra custom code here

  // ex. to send the information to the server

  $('#rateMe').on('click', '#voteSubmitButton',  function() {

    $stars.popover('hide');

  });

​

  // Cancel, just close the popover

  $('#rateMe').on('click', '#closePopoverButton', function() {

    $stars.popover('hide');

  });

​

});

​

$(function () {

  $('.rate-popover').popover({

    // Append popover to #rateMe to allow handling form inside the popover

    container: '#rateMe',

    // Custom content for popover

    content: `<div class="my-0 py-0"> <textarea type="text" style="font-size: 0.78rem" class="md-textarea form-control py-0" placeholder="Write us what can we improve" rows="3"></textarea> <button id="voteSubmitButton" type="submit" class="btn btn-sm btn-primary">Submit!</button> <button id="closePopoverButton" class="btn btn-flat btn-sm">Close</button>  </div>`

  });

  $('.rate-popover').tooltip();

});

​