Examples

Example of simple hint.

<div id="box" style="background: #fff073; width: 300px; height: 200px;"></div>
<script>
(function() {
	var spotlight = new BX.SpotLight({
		targetElement: BX("box"),
		content: "Hint text",
		targetVertex: "bottom-right"
	});
	spotlight.show();
})();
</script>

Example of new menu item highlighting.

<button id="menu-button" style="width: 200px; height: 50px; border: 1px solid #ccc;">Menu</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: "London" },
				{ text: "New York" },
				{ text: "Toronto" },
				{ text: "Seattle" },
				{ text: "Los Angeles" },
				{ text: "California", id: "San Francisco" }
			],
			{
				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("San Francisco");
			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>