j-Tooltip

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

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

Metodi

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.

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>