I had thought that I figured out how to use the Kendo tooltip widget as illustrated in another post, however, I quickly found out that by over-riding the k-tooltip Kendo base class I could only have one tooltip style for the whole page. Unlike most other Kendo widgets, you can't specify a unique css rule with #divName .k-tooltip { rules... }. As soon as I put in the element name in front of .k-tooltip, everything broke. I thought that I must have made a silly mistake, and tried everything, including the element name after the .k-tooltip class, trying to put in the parent element name, trying to create new custom classes, and appending the class to .k-tooltip, etc., but nothing worked. Time to search the web with Google...

Apparently, Telerik's tooltip design prevents this type of chaining. You can't manually add a class to the tooltip. Instead, we have to use jQuery's addClass to add a class in a function. This particular approach has some issues when the first tooltip is raised (the cutout does not immediately point to the element, and the correct background color may not immediately appear), but otherwise, it works for the most part. I am finally able to have multiple Kendo tooltip styles. Here is my approach. There are a few ColdFusion tags in the example, but the code and comments should be illustrative. A working example of this code is found on my home site at gregoryalexander.com/ HTML

<!--- Tooltip on the left side of the page. --->
<div id="aboutThisImage">
	<span id="leftTooltip" title="Jenny Lake, Grand Teton National Park." data-desc="This is a majestic trail. But pay attention.... you may come face to face with a Grizzly bear..." class="leftTooltip">
		<img src="/images/symbol/aboutGreen.gif" align="center" />
	</span>
</div><!---<div id="aboutThisImage">--->

<!--- Tooltip on the right side of the page. --->
<div id="imageLocation">
	<!--- Don't show the tooltip on mobile devices. --->
	<cfif not session.isMobile><span title="Click to view an interactive map." data-desc="Click on this button to view an interactive map of the Jenny Lake trail." class="rightTooltip"></cfif>
		<img src="/images/symbol/mapMarkerButton.gif" align="left" onClick="openMapWindow(0)"/>
	<cfif not session.isMobile></span></cfif>
</div><!---<div id="imageLocation">--->

CSS:

/* Custom classes for the tooltips. These classes will be used to override the base k-tooltip class. */
.leftTooltipStyle {
	background: #046FA1 !important;   /* Blue matching the left part of the logo */
	width: var(--toolTipWidth);
	height: var(--toolTipHeight);
	font-size: var(--toolTipFontSize);
	border-radius: 10px;
	/* Subtle drop shadow on the main layer */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
		
/* Custom classes for the tooltips. These classes will be used to override the base k-tooltip class. */
.rightTooltipStyle {
	background: #698A50 !important; /* Green matching the right part of the logo */
	width: var(--toolTipWidth);
	height: var(--toolTipHeight);
	font-size: var(--toolTipFontSize);
	border-radius: 10px;
	/* Subtle drop shadow on the main layer */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
		
.tooltipTemplateWrapper h3 {
	font-size: <cfif session.isMobile>12px<cfelse>1em</cfif>;
	font-weight: bold;
	padding: 0px 10px 5px;
	border-bottom: 1px solid #e2e2e2;
	text-align: left;
}

.tooltipTemplateWrapper p {
	font-size: <cfif session.isMobile>12px<cfelse>1em</cfif>;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-align: left;
}

And finally, the javascript:

var leftTooltipIntro = $("#intro").kendoTooltip({
	// A class can also be used to trigger the popup.
	filter: ".leftTooltip",
	position: "right",
	// Note: we need to use a template as we have created a popup matching the blue notification popups on the right side of the page.
	content: kendo.template($("#aboutTemplate").html()),
	show: function(e) {
		// We also need to override the k-tooltip style with our own class. Otherwise, all of the other tooltips will have the same style. We are differentiating the look of both the right and left tooltip. 
		this.popup.element.addClass("leftTooltipStyle");
	},
	// Add animation effects.
	animation: {
		open: {
			effects: "zoom",
			duration: 150
		}
	}
}).data("kendoTooltip");
				
var rightTooltipIntro = $("#intro").kendoTooltip({
	// A class can also be used to trigger the popup. We can have as many classes as we want separated by comma's.
	filter: ".rightTooltip",
	position: "left",
	// Note: we need to use a template as we have created a popup matching the blue notification popups on the right side of the page.
	content: kendo.template($("#locationTemplate").html()),
	show: function(e) {
		// We also need to override the k-tooltip style with our own class. Otherwise, all of the other tooltips will have the same style. We are differentiating the look of both the right and left tooltip. 
		this.popup.element.addClass("rightTooltipStyle");
	},
	// Add animation effects.
	animation: {
		open: {
			effects: "zoom",
			duration: 150
		}
	}
}).data("kendoTooltip");