28 #Tooltip Tooltip
28.1 #Tooltip.on-bottom Tooltip on bottom
.sf-tooltip
Html
<div class="sf-row -align-items-center" style="padding-bottom: 100px;">
<div class="sf-tooltip -dropped">
<button type="button" class="sf-button">Load 50 more News</button>
<div class="sf-tooltip__content -down">
<div class="sf-notification -tooltip -down">
<span class="sf-notification__close-button"></span>
<div class="sf-notification__content">
<h4>Looking for specific items?</h4>
<a>Search</a> or <a>filtering</a> may be easier
</div>
</div>
</div>
</div>
</div>
28.2 #Tooltip.on-click Info icon and tooltip opens on click
.sf-tooltip
1920 x 1200
jpeg
762.72 KB
jpeg
762.72 KB
1920 x 1200
jpeg
762.72 KB
jpeg
762.72 KB
Html
<div class="sf-row -align-items-center">
<div class="sf-tooltip -open-on-click">
<i class="sf-icon -sf-clickable sf-fa sf-fa-info-circle -black -size-m"></i>
<div class="sf-tooltip__content sf-notification -tooltip">
<div class="sf-notification__content">
1920 x 1200<br>
<span class="-sf-txt-upper-case">jpeg</span><br>
762.72 KB
</div>
</div>
</div>
<div class="sf-tooltip -open-on-click -dropped">
<i class="sf-icon -sf-clickable sf-fa sf-fa-info-circle -black -size-m"></i>
<div class="sf-tooltip__content sf-notification -tooltip">
<div class="sf-notification__content">
1920 x 1200<br>
<span class="-sf-txt-upper-case">jpeg</span><br>
762.72 KB
</div>
</div>
</div>
</div>
28.3 #Tooltip.on-the-left Tooltip on the left
.sf-tooltip
Html
<div class="sf-row -align-items-center" style="padding-left: 250px;">
<div class="sf-tooltip -dropped">
<button type="button" class="sf-button">Load 50 more News</button>
<div class="sf-tooltip__content -left">
<div class="sf-notification -tooltip -left">
<span class="sf-notification__close-button"></span>
<div class="sf-notification__content">
<h4>Looking for specific items?</h4>
<a>Search </a>or<a> filtering</a> may be easier
</div>
</div>
</div>
</div>
</div>
28.4 #Tooltip.on-the-right Tooltip on the right
.sf-tooltip
Html
<div class="sf-row -align-items-center">
<div class="sf-tooltip -dropped">
<button type="button" class="sf-button">Load 50 more News</button>
<div class="sf-tooltip__content -right">
<div class="sf-notification -tooltip -right">
<span class="sf-notification__close-button"></span>
<div class="sf-notification__content">
<h4>Looking for specific items?</h4>
<a>Search </a>or<a> filtering</a> may be easier
</div>
</div>
</div>
</div>
</div>
28.5 #Tooltip.tooltip Info icon and tooltip
.sf-tooltip
1920 x 1200
jpeg
762.72 KB
jpeg
762.72 KB
Html
<div class="sf-tooltip">
<i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
<div class="sf-tooltip__content sf-notification -tooltip">
<div class="sf-notification__content">
1920 x 1200<br>
<span class="-sf-txt-upper-case">jpeg</span><br>
762.72 KB
</div>
</div>
</div>