//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Core licensed under CC BY-SA 4.0 

extends ../../../core/_master-pattern
block content

	+h(0)
	p Tooltips provide brief information messaging through a mouse or keyboard hover. 
	+h(1)
	p Use tool tips to provide additional information. Don't use tooltips for that is required to complete an interaction as the information disappears when it loses the hover state. 
	
	p Use tooltips to help differentiate between multiple, close, similar options. 

	+h(2)

	p.notification-box.info Currently, there is no easy way to activate a hover without with pure CSS without using a keyboard or mouse. Level4 media queries aim to solve that.

	p Either form works. Place this inside another element for the tooltip to be 'linked to that element.' A container element may need to be added for a single tag element, such as a input field. 

	p Tool tip positions are: 
	ul 
		li top / block-start
		li right / inline-end
		li bottom / block-end
		li left / inline-start

	p
		include _tooltip.pug


	div#tooltip.tab-group
		pre.language-html(data-tab="html")
			include _tooltip.pug
		pre.language-pug(data-tab="pug")
			include _tooltip.pp
		pre.language-css(data-tab="css")
			include tooltip.css
		pre.language-css(data-tab="scss")
			include _tooltip.scss

