PureCSSToolTip

Simple pure CSS ToolTip

Simple CSS Only Tooltips Examples

Just another CSS only tooltip library for showing custom tooltips when hovering over an element.

Position

<button tooltip-lbl='You hover on Top' tooltip-pos='top'>Top</button>
<button tooltip-lbl='You hover on Bottom' tooltip-pos='bottom'>Bottom</button>
<button tooltip-lbl='You hover on Left' tooltip-pos='left'>Left</button>
<button tooltip-lbl='You hover on Right' tooltip-pos='right'>Right</button>
<button tooltip-lbl='You hover on Top Right' tooltip-pos='top-right'>Top Right</button>
<button tooltip-lbl='You hover on Top Left' tooltip-pos='top-left'>Top Left</button>
<button tooltip-lbl='You hover on Bottomo Right' tooltip-pos='bottom-right'>Bottom Right</button>
<button tooltip-lbl='You hover on Bottom Left' tooltip-pos='bottom-left'>Bottom Left</button>

Size

<button tooltip-lbl='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' tooltip-pos='top' tooltip-size='sm'>Small</button>
<button tooltip-lbl='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' tooltip-pos='top' tooltip-size='md'>Medium</button>
<button tooltip-lbl='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' tooltip-pos='top' tooltip-size='lg'>Large</button>
<button tooltip-lbl='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' tooltip-pos='top' tooltip-size='xlg'>Extra Large</button>
<button tooltip-lbl='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' tooltip-pos='top' tooltip-size='fit'>Fit Size</button>