$(document).ready(function () {
  $('.tooltip').each(function()
  {
     var self = this;
     $(self).qtip({
       content: $(self).html(),
       show: 'click',
       hide: 'unfocus',
       position: {
          corner: {
             target: 'topRight',
             tooltip: 'bottomLeft'
          }
       },
       style: {
          tip: 'bottomLeft',
          color: '#fff',
          background: '#7ad42a',
          border: {
             width: 3,
             radius: 8,
             color: '#7ad42a'
          },
          width: 200
       }
     })
     .html('<span class="tooltip_marker">[?]</span>')
     .show();
  });

  $('.tooltip-l').each(function()
  {
     var self = this;
     $(self).qtip({
       content: $(self).html(),
       show: 'click',
       hide: 'unfocus',
       position: {
          corner: {
             target: 'topLeft',
             tooltip: 'bottomRight'
          }
       },
       style: {
          tip: 'bottomRight',
          color: '#fff',
          background: '#7ad42a',
          border: {
             width: 3,
             radius: 8,
             color: '#7ad42a'
          },
          width: 200
       }
     })
     .html('<span class="tooltip_marker">[?]</span>')
     .show();
  })
});