fTip - dependency free vanilla js tooltip

Quick facts:

• 100% free and open source (personal/commercial)
• only 1.2kb gzipped
• available via CDN: https://cdn.jsdelivr.net/gh/faesslich/ftip/dist/

Basic usage:

HTML:

<span data-tooltip='Lorem ipsum dolor sit amet'>Tooltip trigger</span>

JS static include:

<script src="dist/js/fTip.min.js"></script>
<script>
    new fTip();
</script>

Advanced usage:

HTML (with data-attributes):

<span 
    data-tooltip='[[ someClassOfElement ]]'
    data-position="left top"
    data-width="300"
    data-bg="#eee"
    data-color="#222"
>
    Tooltip trigger
</span>

JavaScript Initialise options

{
  delay: 150,
  distance: 15
}

Key	Type	Default	Description
delay	(number)	150	Time to wait until tooltip is rendered.
distance	(number)	15	Optical distance from trigger.

Data-Attribute options

<span 
    data-tooltip='[[ someClassOfElement ]]'
    data-position="left top"
    data-width="300"
    data-bg="#eee"
    data-color="#222"
>

Key	Type	Default	Description
data-tooltip	(string or DOM node)		Content of the tooltip. Just text, HTML, or a DOM selector to get the content from.
data-position	(number)	center top	Positions based on trigger spaced with a empty space. Horizontal: left, center, right, Vertical: top, center, bottom
data-width	(number)	inherit	Set the maximum width in pixels.
data-bg	(string)		Set a specific background-color for the tooltip. HEX, HLS, RGB and RGBA are allowed.
data-color	(string)		Set a specific text-color for the tooltip. HEX, HLS, RGB and RGBA are allowed.

A few examples available in the DEMO.

Browser support

• Chrome >= 41
• Firefox >= 48
• Opera >= 28
• Safari >= 9.1
• Edge >= 12
• iOS Safari >= 9.1