<script>
/**
	A tooltip

		// Can be created dynamically
		var tooltip = new OreeshTooltip();
	
	
		<!-- Or via HTML -->
		<!-- Basic example -->
		<oreesh-tooltip label="Don't forget an umbrealla!">
			Hover over me for a tip
		</oreesh-tooltip>

		<!-- No arrow on tooltip -->
		<oreesh-tooltip label="No arrow!" no-arrow>
			Hover here
		</oreesh-tooltip>
		
		<!-- Positioning the tooltip on the right -->
		<oreesh-tooltip label="I'm on the top and growing to the left" position="top-left">
			Hover here
		</oreesh-tooltip>
		<br><br><br><br><br>

		<!-- Using a custom div for the tooltip -->
		<oreesh-tooltip tip-attribute="extratip">
			Hover here
			<div extratip>
				<img src="image.png">With Image!
			</div>
		</oreesh-tooltip>

		<!-- No event & visible -->
		<oreesh-tooltip label="always visible!" no-event visible>
			tooltip content
		</oreesh-tooltip>

		<!-- No hover -->
		<oreesh-tooltip label="no Hover" no-hover>
			tooltip content
		</oreesh-tooltip>
		
	@class oreesh-tooltip
**/
/**
	The text that is presented in the tooltip.  Text will not be presented if a tip-attribute is being used.

	@attribute label
**/
/**
	Sets the position of the tooltip, relative to the container.
	Possible values are `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, and `bottom-right`
	
	@attribute position
	@default top-center
**/
/**
	Specifies a div for a custom tooltip.  This will cover over any label.
	
	@attribute tip-attribute
**/
/**
	Hide tooltip arrow

	@attribute no-arrow
	@type Boolean
**/
/**
	Prevent tooltip event(contains hover and inner content event)

	@attribute no-event
	@type Boolean
**/
/**
	Prevent tooltip hover event

	@attribute no-hover
	@type Boolean
**/
/**
	Always Show tooltip.

	@attribute visible
	@type Boolean
**/
/**
	Recalculates the position of the tooltip and the arrow.

	@method reposition
**/
/**
	tooltip message show.

	@method show
**/
/**
	tooltip message hide.

	@method hide
**/
</script>

<dom-module id="oreesh-tooltip">
	<template>
		<link rel="stylesheet" is="custom-style" href="./oreesh-tooltip.css">
		<div class='hoverTarget'>
			<content></content>
		</div>

		<div class="oreeshTooltipMain">
			<div class="arrow"></div>
			<div class="label">{{label}}</div>
		</div>
	</template>
</dom-module>

<script src="./oreesh-tooltip.js"></script>