j-Tooltip

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Singletă
Utilizare universală
NEW ascundere (SETTER('tooltip', 'hide', [force])) susține acum parametrul force pentru ascunderea instantă.

Metode

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

Utilizați-l cu <ui-component name="tooltip">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>