28 #Tooltip Tooltip

    <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>

    <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>

    <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>

    <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>

    <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>