PolicyGenius - Style Guide

Tooltip

Click on text to see tooltips

Centered Tooltip

Curabitur eget

Aliquam

Mauris in dui at massa finibus sodales sit amet ac nibh. Etiam fermentum magna.

 
.mod-example style='margin-left:200px;'
  .policygenius-tooltip
    | Curabitur eget
    .popup
      p: strong Aliquam
      p Mauris in dui at massa finibus sodales sit amet ac nibh. Etiam fermentum magna.

Left Aligned Tooltip

Curabitur eget
In lacinia mi ut urna porta, eget volutpat ligula finibus. Vestibulum convallis sapien sed mattis tempor.
 
.mod-example style='margin-left:200px;'
  .policygenius-tooltip
    | Curabitur eget
    .popup.left-align
      | In lacinia mi ut urna porta, eget volutpat ligula finibus. Vestibulum convallis sapien sed mattis tempor.

Right Aligned Tooltip

Curabitur eget
In lacinia mi ut urna porta, eget volutpat ligula finibus. Vestibulum convallis sapien sed mattis tempor.
 
.mod-example style='margin-left:200px;'
  .policygenius-tooltip
    | Curabitur eget
    .popup.right-align
      | In lacinia mi ut urna porta, eget volutpat ligula finibus. Vestibulum convallis sapien sed mattis tempor.
 
$('.policygenius-tooltip').on('click', function(e) {
  var $target = $(e.target);
  $target.toggleClass('show');
});