This is a migrated thread and some comments may be shown as answers.

ToolTip without callout

3 Answers 481 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

HUA asked on 16 Apr 2013, 01:16 PM

tooltip.jpg

tooltipexemple.png

Dear Kendo Team,
I try to run a tooltip (see code below and result in attachment).

var tooltip = $("#Button_Settings_ID").kendoTooltip({

filter: "input",

width: 210,

height: heigth,

position: "bottom",

autoHide: false,

showOn: "click",

callout: true,

content: kendo.template($("#Button_Settings_template").html())

}).data("kendoTooltip");

This works fine, excepted I can see the call out...
I force the value to true, but without succes...
I take your example, provided here, and I've got the same result....(see in attachment)

<head>

<title></title>

<link href="Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" type="text/css" />

<script src="Script/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="Script/kendo/2013.1.319/kendo.all.min.js" type="text/javascript"></script>

</head>

<body>

<div id="example" class="k-content">

<div class="demo-section">

<div id="agglomerations">

<a href="#" title="Canton - 26,300,000" id="canton"></a>

<a href="#" title="Jakarta - 25,800,000" id="jakarta"></a>

<a href="#" title="Mexico City - 23,500,000" id="mexico"></a>

<a href="#" title="Delhi - 23,500,000" id="delhi"></a>

<a href="#" title="Karachi - 22,100,000" id="karachi"></a>

<a href="#" title="New York - 21,500,000" id="newyork"></a>

<a href="#" title="Sao Paulo - 21,300,000" id="saopaolo"></a>

<a href="#" title="Mumbay/Bombay - 21,100,000" id="bombay"></a>

<a href="#" title="Los Angeles - 17,100,000" id="losangeles"></a>

<a href="#" title="Osaka - 16,800,000" id="osaka"></a>

<a href="#" title="Moscow - 16,200,000" id="moscow"></a>

</div>

<script>

$(document).ready(function () {

var tooltip = $("#agglomerations").kendoTooltip({

filter: "a",

width: 120,

position: "top"

}).data("kendoTooltip");

tooltip.show($("#canton"));

$("#agglomerations").find("a").click(false);

});

</script>

<style scoped="scoped">

.demo-section {

width: 692px;

}

#agglomerations {

position: relative;

width: 692px;

height: 480px;

margin: 0 auto;

background: url('../../content/web/tooltip/world-map.jpg') no-repeat 0 0;

}

#agglomerations a {

position: absolute;

display: block;

width: 12px;

height: 12px;

background-color: #fff600;

-moz-border-radius: 30px;

-webkit-border-radius: 30px;

border-radius: 30px;

border: 0;

-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.5);

box-shadow: 0 0 0 1px rgba(0,0,0,0.5);

-moz-transition: -moz-box-shadow .3s;

-webkit-transition: -webkit-box-shadow .3s;

transition: box-shadow .3s;

}

#agglomerations a:hover {

-moz-box-shadow: 0 0 0 15px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 0 0 15px rgba(0,0,0,0.5);

box-shadow: 0 0 0 15px rgba(0,0,0,0.5);

-moz-transition: -moz-box-shadow .3s;

-webkit-transition: -webkit-box-shadow .3s;

transition: box-shadow .3s;

}

#canton { top: 226px; left: 501px; }

#jakarta { top: 266px; left: 494px; }

#mexico { top: 227px; left: 182px; }

#delhi { top: 214px; left: 448px; }

#karachi { top: 222px; left: 431px; }

#newyork { top: 188px; left: 214px; }

#saopaolo { top: 304px; left: 248px; }

#bombay { top: 233px; left: 438px; }

#losangeles { top: 202px; left: 148px; }

#osaka { top: 201px; left: 535px; }

#moscow { top: 153px; left: 402px; }

#canton:hover,

#jakarta:hover,

#mexico:hover,

#delhi:hover,

#karachi:hover,

#newyork:hover,

#saopaolo:hover,

#bombay:hover,

#losangeles:hover,

#osaka:hover,

#moscow:hover { z-index: 10; }

</style>

</div>

</body>

</html>

The only things that i've changed, it's the jquery path (currently using jquery-1.8.3.min.js)
Thanks for your help!
Best regards

3 Answers, 1 is accepted

answered on 16 Apr 2013, 02:35 PM

tooltipexemple_css.png

tooltipexemple_css1.png

Hi Dimiter,
Thanks for your reply.
I've just updated my jquery, but the issue is still remained...
I can't see the callout displayed...
When I change the property of the class .k-callout, the callout appears....(see files attached)
Is-it the normal behavior?

var tooltip = $("#agglomerations").kendoTooltip({

filter: "a",

width: 120,

autoHide: false,

position: "top"

}).data("kendoTooltip");

tooltip.show($("#canton"));

$("#agglomerations").find("a").click(false);

Thanks in advance for your answer.