TOOLTIPS

JTB MD allows the user to show customizable tooltips on their projects with no effort.

Directions

There are four options available; left, top, bottom, right.

You can include tooltips to your elements with adding attribute jtbTooltip with the desired direction, and jtbTooltipContent attribute which holds the tooltip's content.

			Copy
			<button class='jtbButton' jtbTooltip='left' jtbTooltipContent='Left content'>Tooltip Left</button>
<button class='jtbButton' jtbTooltip='top' jtbTooltipContent='Top content'>Tooltip Top</button>
<button class='jtbButton' jtbTooltip='bottom' jtbTooltipContent='Bottom content'>Tooltip Bottom</button>
<button class='jtbButton' jtbTooltip='right' jtbTooltipContent='Right content'>Tooltip Right</button>
		

Tooltip headers

It is possible to include a header inside the tooltip, just put jtbTooltipHeader attribute inside your tag.

			Copy
			<button class='jtbButton' jtbTooltip='bottom' jtbTooltipHeader='Tooltip Header' jtbTooltipContent='Tooltip content'>Tooltip Bottom</button>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbTooltips has been written in tooltip.js plugin of jtb_md.js. To avoid any problematic behaviour on tooltips; do not remove this plugin manually.

Creating

To add a tooltip to specific element in DOM, you can use the jtbTooltip function at any time:

				Copy
				$('#elementID').jtbTooltip({
	position: 'right',
	content: 'bla',
	header: 'bla'
});
			

Options

While initializing the jtbTooltips in your project there are several options available for better results.

Name Type Default Description
position string 'right' The element that is used for defining the tooltip position itself. You can define this attribute via your jtbTooltip attribute.
There are 4 possible strings that is available for this option:
top | bottom | right | left
header string '' The element that is used for defining the header of the tooltip. You can define this attribute via your jtbTooltipHeader attribute.
content string '' The element that is used for defining the content of the tooltip. You can define this attribute via your jtbTooltipContent attribute.

Methods

You can also use the jtbTooltip methods to make the tooltip perform an action.

Show

If you want to make a spesific jtbTooltip visible, you can easily call the jtbTooltip method with parameter show.

				Copy
				$('#parentID').jtbTooltip('show')
			

Hide

If you want to make a spesific jtbTooltip hidden, you can easily call the jtbTooltip method with parameter hide.

				Copy
				$('#parentID').jtbTooltip('hide')
			

Toggle visibility

If you want to change a spesific jtbTooltip's visibility, you can easily call the jtbTooltip method with parameter toggle.

				Copy
				$('#parentID').jtbTooltip('toggle')
			

Destroy

If you want to destroy a spesific jtbTooltip's visibility, you can easily call the jtbTooltip method with parameter destroy.

				Copy
				$('#parentID').jtbTooltip('destroy')