Примеры

Простая подсказка

<div id="box" style="background: #fff073; width: 300px; height: 200px;"></div>
<script>
(function() {
	var spotlight = new BX.SpotLight({
		targetElement: BX("box"),
		content: "Текст подсказки",
		targetVertex: "bottom-right"
	});
	spotlight.show();
})();
</script>

Подсветка нового пункта в меню

<button id="menu-button" style="width: 200px; height: 50px; border: 1px solid #ccc;">Меню</button>
<script>
(function() {

	"use strict";

	BX.namespace("BX.MyModule");

	BX.MyModule.MyButton = function()
	{
		this.button = BX("menu-button");
		BX.bind(this.button, "click", this.handleButtonClick.bind(this));

		this.menu = new BX.PopupMenuWindow(
			"mymenu",
			this.button,
			[
				{ text: "Лондон" },
				{ text: "Нью Йорк" },
				{ text: "Торонто" },
				{ text: "Киев" },
				{ text: "Москва" },
				{ text: "Калининград", id: "kaliningrad" }
			],
			{
				events: {
					onAfterPopupShow: this.handleAfterPopupShow.bind(this),
					onPopupClose: this.handlePopupClose.bind(this)
				}
			}
		);

		this.spotlight = new BX.SpotLight({
			targetElement: this.button,
			targetVertex: "middle-right",
			events: {
				onTargetEnter: this.handleTargetEnter.bind(this)
			}
		});

		this.spotlight.show();
	};

	BX.MyModule.MyButton.prototype =
	{
		handleAfterPopupShow: function()
		{
			var targetItem = this.menu.getMenuItem("kaliningrad");
			var item = targetItem.getLayout().item;

			this.spotlight.setTargetElement(item);
			this.spotlight.setTargetVertex("middle-center");
			this.spotlight.adjustPosition();
		},

		handlePopupClose: function()
		{
			this.spotlight.setTargetElement(this.button);
			this.spotlight.setTargetVertex("middle-right");
			this.spotlight.adjustPosition();
		},

		handleButtonClick: function()
		{
			this.menu.show();
		},

		handleTargetEnter: function()
		{
			this.menu.show();
		}
	};

	BX.ready(function() {
		new BX.MyModule.MyButton();
	})

})();
</script>