CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

This is a small box that acts as information tip of a specific content when mouse over without clicking the item. It can be used with any html elements. It is identified by class name tooltip and tip-type, where type is the tip positioning options such as top, bottom, left and right. The parent block is usually assigned the tooltip class and the embedding sibling container is assigned the tip-type.

Tooltip contents can also be stored using a data attribute in this form data-title="" to display possible hidden information. View demo

A very good tip does not need to be inundated with a lot of contents, avoid using excessive contents when displaying tooltip information.

Top positioned tooltip

Tooltip use within the paragraph inline. Hover on the sentence below to view the tip.

Example

Top Tiptooltip

  
        <p>
          <a href="" class="tooltip">Top Tip<span class="tip-top">tooltip</span></a>
        </p>
                    

Bottom positioned tooltip

Example

Bottom Tooltiptooltip



  
        <p>
          <a href="" class="tooltip">Top Tip<span class="tip-top">tooltip</span></a>
        </p>
                    

Left positioned tooltip

Left Tooltiptooltip



  
         <p class="align-center ">
          <a href="" class="tooltip">Top Tip<span class="tip-left">tooltip</span></a>
         </p>
                    

Right positioned tooltip

Right Tooltiptooltip



  
        <p class="align-center ">
          <a href="" class="tooltip">Top Tip<span class="tip-right">tooltip</span></a>
        </p>
                    

Color tooltip

Tooltip content can be color using the color class, just assign the color class name if known to the tip-type container as shown below.

Right Tooltiptooltip



  
         <p class="align-center ">
          <a href="" class="tooltip">Top Tip<span class="tip-right color-set-redOrange">tooltip</span></a>
         </p>
                    

Tooltip with hidden pointer

The pointer from the tip of the tooltip can be removed completely by adding class name hidepointer. The class is assigned to the class attribute of the parent container of tooltip as shown below.

Top Tip with hidden pointertooltip



  
         <p class="align-center ">
           <a href="" class="tooltip hidepointer">Top Tip<span class="tip-top">tooltip</span></a>
         </p>
                    

custom setting

The position and size of the tooltip can be varied by changing or assigning any custom value to the width, height and line-height property of the component that control the tooltip. To customize it, you should follow below instruction and apply the new rule to your inline style sheet.

This setting is only applied to the tooltip option that does not display hidden content with data- attribute.

In order to have proper setting, you must first divide every assigned value to this property(width, height and line-height ) by half to (center) the pointer to the target tip. The value must be maintained for width, height and line height to ensure equal visual presentation.

This rule only applied to the horizontally placed tip (left and right tool tip positions).



  
        .tooltip .tip-left, 
        .tooltip .tip-right{
        width:100px !important;          
        height:100px !important;
        line-height:100px;
        margin-top: -50px !important; 
        /*Divide every assigned value to property(width, 
        height and line-height ) by half to center the pointer to the target tip
        Same value must be maintained for width, height and line height to 
        ensure equal visual presentation.
        */
}
                   

Tooltip using data attribute

This type of tooltip render its contents using data attribute with data-title to store any contents that would act as the hidden tip information. You need to assign a class name tooltip-att to any specified element acting as its containing block.


Data Attribute Tooltip



  
    <p class="align-center ">
        <span class="tooltip-att" data-title="Absolutely CSS with data-attribute!">
            Data Attribute Tooltip
        </span>
    </p>
                    

How to customize tooltip with data attribute

The position and color of the embedding tooltip of this kind can be customized as shown below

 
    <style>
  /* Default Rule */
        [class*=tooltip-att][data-title]:before
        {
        background:#333; /* The default background color */
        color: #fff;     /* The default foreground color */
        bottom:1.5em !important; /* The default tooltip position set to top */
        }
        [class*=tooltip-att][data-title]:hover:before, 
        [class*=tooltip-att][data-title]:hover:after
        {
        bottom:2em !important     /* The default tooltip position set to top */
        }
    /*  The new rule */
   
     [class*=tooltip-att][data-title]:before
        {
        background:#f00; /* The new background color */
        color: yellow;     /* The new foreground color */
        bottom:1.5em !important; /* The default tooltip position set to top */
        }
        [class*=tooltip-att][data-title]:hover:before, 
        [class*=tooltip-att][data-title]:hover:after
        {
        top:2em !important;
        }
    <style>                

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.