Gregory's Blog

Kendo tooltips with multiple classes and styles.

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 that 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

view plain about
1<!--- Tooltip on the left side of the page. --->
2<div id="aboutThisImage">
3    <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">
4        <img src="/images/symbol/aboutGreen.gif" align="center" />
5    </span>
6</div><!---<div id="aboutThisImage">--->
7
8<!--- Tooltip on the right side of the page. --->
9<div id="imageLocation">
10    <!--- Don't show the tooltip on mobile devices. --->
11    <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>
12        <img src="/images/symbol/mapMarkerButton.gif" align="left" onClick="openMapWindow(0)"/>
13    <cfif not session.isMobile></span></cfif>
14</div><!---<div id="imageLocation">--->

CSS:

view plain about
1/* Custom classes for the tooltips. These classes will be used to override the base k-tooltip class. */
2.leftTooltipStyle {
3    background: #046FA1 !important; /* Blue matching the left part of the logo */
4    width: var(--toolTipWidth);
5    height: var(--toolTipHeight);
6    font-size: var(--toolTipFontSize);
7    border-radius: 10px;
8    /* Subtle drop shadow on the main layer */
9    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
10}
11        
12/* Custom classes for the tooltips. These classes will be used to override the base k-tooltip class. */
13.rightTooltipStyle {
14    background: #698A50 !important; /* Green matching the right part of the logo */
15    width: var(--toolTipWidth);
16    height: var(--toolTipHeight);
17    font-size: var(--toolTipFontSize);
18    border-radius: 10px;
19    /* Subtle drop shadow on the main layer */
20    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
21}
22        
23.tooltipTemplateWrapper h3 {
24    font-size: <cfif session.isMobile>12px<cfelse>1em</cfif>;
25    font-weight: bold;
26    padding: 0px 10px 5px;
27    border-bottom: 1px solid #e2e2e2;
28    text-align: left;
29}
30
31.tooltipTemplateWrapper p {
32    font-size: <cfif session.isMobile>12px<cfelse>1em</cfif>;
33    padding-top: 0px;
34    padding-right: 10px;
35    padding-bottom: 10px;
36    padding-left: 10px;
37    text-align: left;
38}

And finally, the javascript:

view plain about
1var leftTooltipIntro = $("#intro").kendoTooltip({
2    // A class can also be used to trigger the popup.
3    filter: ".leftTooltip",
4    position: "right",
5    // 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.
6    content: kendo.template($("#aboutTemplate").html()),
7    show: function(e) {
8        // 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.
9        this.popup.element.addClass("leftTooltipStyle");
10    },
11    // Add animation effects.
12    animation: {
13        open: {
14            effects: "zoom",
15            duration: 150
16        }
17    }
18}).data("kendoTooltip");
19                
20var rightTooltipIntro = $("#intro").kendoTooltip({
21    // A class can also be used to trigger the popup. We can have as many classes as we want separated by comma's.
22    filter: ".rightTooltip",
23    position: "left",
24    // 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.
25    content: kendo.template($("#locationTemplate").html()),
26    show: function(e) {
27        // 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.
28        this.popup.element.addClass("rightTooltipStyle");
29    },
30    // Add animation effects.
31    animation: {
32        open: {
33            effects: "zoom",
34            duration: 150
35        }
36    }
37}).data("kendoTooltip");

This entry was posted on May 8, 2019 at 9:10 PM and has received 20 views.

There are currently 0 comments.




Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.