Tooltip

new ac.buttons.Button({}, "#cntlTooltip");

const cntlTooltip = new ac.popups.Tooltip(
	{
		content: "I am a default tooltip on a button!"
	},
	"#cntlTooltip"
);

new ac.dropdowns.DropDownList(
	{
		select: function (e) {
			cntlTooltip.position = e.itemData.value;
		}
	},
	"#cntlTooltipPosition"
);

<div class="form-horizontal form-bordered">
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Tooltip</label>
		<div class="col-lg-8" style="text-align: center">
			<button id="cntlTooltip">Show Tooltip</button>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Tooltip Position</label>
		<div class="col-lg-8" style="text-align: center">
			<select id="cntlTooltipPosition">
				<option value="TopLeft">Top Left</option>
				<option value="TopCenter" selected="">Top Center</option>
				<option value="TopRight">Top Right</option>
				<option value="BottomLeft">Bottom Left</option>
				<option value="BottomCenter">Bottom Center</option>
				<option value="BottomRight">Bottom Right</option>
				<option value="LeftTop">Left Top</option>
				<option value="LeftCenter">Left Center</option>
				<option value="LeftBottom">Left Bottom</option>
				<option value="RightTop">Right Top</option>
				<option value="RightCenter">Right Center</option>
				<option value="RightBottom">Right Bottom</option>
			</select>
		</div>
	</div>
</div>

new ac.lists.ListView(
	{
		dataSource: sports,
		fields: { text: "text", tooltip: "id" }
	},
	"#cntlSportsList"
);

new ac.popups.Tooltip(
	{
		content: "Loading...",
		target: "#cntlSportsList [title]",
		beforeRender: onBeforeRender
	},
	"#cntlTooltipList"
);

function onBeforeRender(args) {
	var self = this;
	this.content = "Loading...";
	this.dataBind();

	const id = Number(args.target.getAttribute("data-uid"));

	new ac.data.DataStore({ url: SERVICE_URI + "sports", adaptor: new ac.data.ODataV4Adaptor() })
		.executeQuery(new ac.data.Query().where("Id", "equal", id))
		.then((e) => {
			if (e.result) {
				if (e.result.length === 1) {
					self.content = e.result[0].League;
					self.dataBind();
				} else {
					self.content = "Not found";
				}
			} else {
				self.content = "Not found";
			}

			self.dataBind();
		});
}

<div id="cntlTooltipList">
	<div id="cntlSportsList"></div>
</div>

const sports = [
	{ text: "Baseball", id: 1 },
	{ text: "Basketball", id: 2 },
	{ text: "Football", id: 3 },
	{ text: "Golf", id: 4 },
	{ text: "Hockey", id: 5 },
	{ text: "Pickleball", id: 6 },
	{ text: "Rugby", id: 7 },
	{ text: "Soccer", id: 8 },
	{ text: "Swimming", id: 9 },
	{ text: "Tennis", id: 10 }
];

{
  "value": [
	{
	  "Id": 1,
	  "Name": "Baseball",
	  "League": "Major League Baseball (MLB)"
	},
	{
	  "Id": 2,
	  "Name": "Basketball",
	  "League": "National Basketball Association (NBA)"
	},
	{
	  "Id": 3,
	  "Name": "Football",
	  "League": "National Football League (NFL)"
	},
	{
	  "Id": 4,
	  "Name": "Golf",
	  "League": "Professional Golfers' Association (PGA)"
	},
	{
	  "Id": 5,
	  "Name": "Hockey",
	  "League": "National Hockey League (NHL)"
	},
	{
	  "Id": 6,
	  "Name": "Pickelball",
	  "League": "International Federation of Pickleball (IFP)"
	},
	{
	  "Id": 7,
	  "Name": "Rugby",
	  "League": "National Rugby League (NRL)"
	},
	{
	  "Id": 8,
	  "Name": "Soccer",
	  "League": "Fédération internationale de Football Association (FIFA)"
	},
	{
	  "Id": 9,
	  "Name": "Swimming",
	  "League": "International Swimming League (ISL)"
	},
	{
	  "Id": 10,
	  "Name": "Tennis",
	  "League": "Association of Tennis Professionals (ATP)"
	}
  ]
}