inFakt Styleguide

Tooltipy

Tooltip domyślny lewy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
<div class="sg-tooltip-wrap">
  <div class="tooltip-box--ico">
    <span class="ico-active question-ico active"></span>
    <div class="tooltip width-300">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
    </div>
  </div>
</div>

Tooltip domyślny prawy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
<div class="sg-tooltip-wrap ml-332">
  <div class="tooltip-box--ico">
    <span class="ico-active question-ico active"></span>
    <div class="tooltip tooltip-right-top width-300">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
    </div>
  </div>
</div>

Tooltip lewy górny róg

Kliknij tutaj
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
<div class="sg-tooltip-wrap">
  <div class="tooltip--active">
    <a href="#">Kliknij tutaj</a>
    <div class="tooltip tooltip-top--left width-300">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
    </div>
  </div>
</div>

Tooltip lewy dolny róg

Edytuj
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
<div class="sg-tooltip-wrap mt-50">
  <div class="tooltip-wrapper">
    <a href="#" title="Edytuj" class="icon icon-edit">Edytuj</a>
    <div class="tooltip tooltip-bottom--left width-300">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
    </div>
  </div>
</div>

Tooltip prawy górny róg

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
<div class="sg-tooltip-wrap ml-318">
  <div class="tooltip-box--ico">
    <span class="ico-active question-ico active"></span>
    <div class="tooltip tooltip-top--right width-300">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
    </div>
  </div>
</div>

Tooltip prawy dolny róg

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
<div class="sg-tooltip-wrap ml-318 mt-70">
  <div class="tooltip-box--ico">
    <span class="ico-active question-ico active"></span>
    <div class="tooltip tooltip-bottom--right width-300">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ducimus?
    </div>
  </div>
</div>