# j-Tooltip

> j-Tooltip: singleton; univerzálne použitie

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 87c2519b19cf30287b8fe86a9495d3807d68e282d84df17cb25ffe2a32c315de
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- singleton
- univerzálne použitie
- __NEW__ hide (`SETTER('tooltip', 'hide', [force])`) teraz podporuje parameter `force` pre okamžité skrytie.

__METHODS__

```javascript
var opt = {};

// opt.offsetX {Number}    : adds X offset (default: 0)
// opt.offsetY {Number}    : adds Y offset (default: 0)
// opt.align {String}      : align `bottom` (default), `top`, `left` or `right`
// opt.center {Boolean}    : centered position for `left` and `right` align (default: false)
// opt.timeout {Number}    : hide timeout (in milliseconds), default: `undefined`

opt.element = YOUR_ELEMENT;
opt.html = 'YOUR_HTML_CONTENT';

SETTER('tooltip', 'show', opt);
```

Použite ho so `<ui-component name="tooltip">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```html example.html
<ui-component name="tooltip"></ui-component>

<div style="padding:50px">
	<div class="tooltip" data-title="Lorem ipsum dolor sit amet 1." style="text-align:center;background-color:#F0F0F0;padding:10px 0;">HOVER ME 1</div>
	<br />
	<br />
	<div class="tooltip" data-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, expedita." style="text-align:center;background-color:#F0F0F0;padding:10px 0;">HOVER ME 2</div>
</div>

<script>
	$(document).on('mouseenter mouseleave', '.tooltip', function(e) {
		if (e.type === 'mouseenter') {
			var el = $(this);
			var opt = {};
			opt.element = el;
			opt.html = el.attrd('title');
			opt.align = 'bottom';
			opt.timeout = 3000;
			SETTER('tooltip', 'show', opt);
		} else
			SETTER('tooltip', 'hide');
	});
</script>
```