j-Tooltip

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Singleton
uniwersalne użycie
NEW ukrycie (SETTER('tooltip', 'hide', [force])) teraz obsługuje parametr force dla natychmiastowego ukrycia.

Metody

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

Użyj go z <ui-component name="tooltip">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>