Hello,
I am having a weird bug with the tooltip when using Firefox. The tooltip works correctly on Chrome and Safari, but with Firefox, the tooltip opens, closes, and reopens several times within a second and is stuck in an endless loop. I tried removing animations, changing the structure that invokes the tooltip, took out the onClick event and several other things, but nothing works. Firefox still has a bug on the tooltips.
The tooltip on the bottom left side of the page works, but the tooltip on the bottom right is the problematic tooltip. Both tooltips shared the same code, but I broke the code into two sections and changed the logic, the tooltip on the left has the tooltip position on the left, whereas the tooltip on the right has the tooltip position to show on the left. I had thought that this may be the problem as the position was not right, but that did not solve the issue either.
When debugging, I am seeing a k-animation container go from various classes. When the tooltip is shown, I see a tt_active class with display block, and when hidden, no class but display none. I have attached the files.
The bug can be reproduced by clicking on the map marker image at the bottom right of the page for every scene. The tooltip that works is on the bottom left. The URL is gregoryalexander.com/indexNew.cfm. The bug only exists when using firefox. Chrome works.
On another note, I wanted the tooltip (that is working) on the left to be colored blue, and the tooltip to the right (that is broken) to be colored green. These are the two colors of my logo at the top of the page. I tried to use the ID of the element and the k-tooltip class like so, but it did not work. I tried many other options, and can't seem to get the tooltips to use different colors without breaking the tooltip. How can I prefix the class or element when I style the .k-tooltip class like so?
#aboutThisImage .k-tooltip {
background: #698A50 !important;
width: var(--toolTipWidth);
height: var(--toolTipHeight);/*<cfif session.isMobile>175<cfelse>215</cfif>px;*/
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);
}
3 Answers, 1 is accepted
Rank 1
I tried to send files with examples and code, but it was too big- I'll post the code here.
Css:
.k-tooltip {
background: #698A50 !important;
width: var(--toolTipWidth);
height: var(--toolTipHeight);/*<cfif session.isMobile>175<cfelse>215</cfif>px;*/
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;
}
Templates:
<!--- Kendo tooltip template --->
<script id="aboutTemplate" type="text/x-kendo-template">
<div class="tooltipTemplateWrapper">
<h3>#=target.data('title')#</h3>
<p>#=target.data('desc')#</p>
</div>
</script>
<!--- Kendo tooltip template --->
<script id="locationTemplate" type="text/x-kendo-template">
<div class="tooltipTemplateWrapper">
<h3>#=target.data('title')#</h3>
<p>#=target.data('desc')#</p>
</div>
</script>
Javascript:
<!--- Green tooltip for the intro section (there is one more tooltip for the mainContainer below). --->
<script>
$(document).ready(function() {
var leftTooltip = $("#intro").kendoTooltip({
filter: "leftTooltip",
position: "right",
content: kendo.template($("#aboutTemplate").html()),
animation: {
open: {
effects: "zoom",
duration: 150
}
}
}).data("kendoTooltip");
var rightTooltip = $("#intro").kendoTooltip({
filter: "rightTooltip",
position: "left",
content: kendo.template($("#locationTemplate").html()),
animation: {
open: {
effects: "zoom",
duration: 150
}
}
}).data("kendoTooltip");
});
</script>
HTML Elements:
<div id="aboutThisImage">
<leftTooltip href="#" title="Vernal Falls via the Mist Trail. Yosemite." data-desc="This beautiful hike in Yosemite is a stairway to heaven, and the view looking back from the Muir Trail is remarkable as well.">
<img src="/images/symbol/aboutGreen.gif" align="center" />
</leftTooltip>
</div><!---<div id="aboutThisImage">--->
<div id="imageLocation">
<cfif not session.isMobile><rightTooltip href="#" title="Click to view an interactive map." data-desc="Click on this button to view an interactive map of the Mist trail."></cfif>
<img src="/images/symbol/mapMarkerButton.gif" align="left" onClick="openMapWindow(3)"/>
<cfif not session.isMobile></rightTooltip></cfif>
</div><!---<div id="imageLocation">--->
I have prepared the following Dojo example based on the code snippets provided. With it, both the left and right Tooltips are being displayed successfully when hovered in the latest versions of Chrome and Firefox. Could you test the demo and verify if it is working correctly on your end?
I assume that I am missing some important configuration that would enable me to reproduce the issue on my end. Therefore, may I ask you to update the Dojo example accordingly, so that the observed issue is replicated and then send it back to me for further review?
Regards,
Dimitar
Progress Telerik
Rank 1
I re-coded the tooltips using the following technique in the link below and it fixed this issue. I suspect that the old code caused the bug as the tooltip filter was hard coded as a HTML5 element.
http://gregoryalexander.com/blogCfc/client/index.cfm/2019/5/8/Kendo-tooltips-with-multiple-classes-and-styles