Slimfaq Integrated Tooltip

slimfaq_integrated_tooltip.jsx

/**
 * @author Alex Miller <[email protected]>
 * Angular Faq service
 * Dependancies: Angular.js, lodash, angular ui bootstrap
 */

class faqService {
    constructor($http) {
        this.$http = $http;
        this.faqList = {
            'refuel': 'https://slimfaq.com/refuel4-tooltips/1525-dashboard-english/5684-refueling.json'
        };

    }

    getFaq(keywords){
        return this.$http.get(this.faqList[keywords]);
    }
}

faqService.$inject = ['$http'];

export default faqService;

/**
 * @overview angular controler with faqService
 */


class myCtrl {
  constructor($scope, faqService) {

    var ctrl = this;
    ctrl.faqService = faqService;
  }
 
  getFaq(keywords){
    var _this = this;
    this.faqService.getFaq(keywords)
      .then(function(faq){
        if(!_.has(faq, "data.content") || !_.has(faq, "data.name") ){
          return false;
        }
        _this.faqContent = {
          content: faq.data.content,
          title: faq.data.name
        };
      });
  }
}
StepsCtrl.$inject = [
  '$scope',
  'faqService'
];

/**
 * @overview angular template snippet
 */


<a href=""
  ng-mouseover="ctrl.getFaq('ad_set_to_refuel')"
  class="uiTooltipText"
  popover-class="faq-popover"
  popover-placement="bottom-left"
  uib-popover-html="ctrl.faqContent.content"
  popover-trigger="'click'"
  popover-title="{{ctrl.faqContent.title}}"><i class="fa fa-info-circle"></i></a>