# j-Tooltip

> j-Tooltip: singletone; utilizzo universale

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 9bbac09ed124cf4c3e219b46eae4422656c5c7418c5a3dfdb27a4162f0b90a75
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- singolo
- Uso universale
- __NEW__ nascosto (`SETTER('tooltip', 'hide', [force])`) ora supporta il parametro `force` per nascosto istantaneo.

__Metodi__

```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);
```

Utilizzare con `<ui-component name="tooltip">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```