ToolTip without callout

4 posts, 0 answers
  1. THOMAS
    THOMAS avatar
    16 posts
    Member since:
    Apr 2013

    Posted 16 Apr 2013 Link to this post

    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>
                </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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 16 Apr 2013 Link to this post

    Hi Thomas,


    The default value of the Tooltip callout configuration is true. If you want to hide it, you should set it to false. Additionally Kendo UI Q1 2013 requires jQuery version 1.9 as described on the JavaScript Dependencies page.

     
    I hope this information was helpful for you.

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. THOMAS
    THOMAS avatar
    16 posts
    Member since:
    Apr 2013

    Posted 16 Apr 2013 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Apr 2013 Link to this post

    Hi Thomas,

    The theme stylesheet should always be registered after the common stylesheet, as stated in the documentation. If you inspect the callout element again, you will see that its border-top-color style is currently overridden.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready