Dynamically change the width of a tooltip based on it's content & restyle

3 posts, 0 answers
  1. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 23 Sep 2014 Link to this post

    So I am using the latest build at the time of writing this "2014.2.909" and I have some "info" tooltips that the contents will dynamically change based on a combobox selection.

    The tooltip is set up like this: 
    2.  .For(".glyphicon-question-sign")
    3. .Position(TooltipPosition.Top)
    4.  .Animation(true)                              
    5.  .Events(events => events.Show("tooltipReset"))
    6.  .Width(450)
    7. .ContentTemplateId("tooltip-template")

    Now I am using a template like this:

    01.<script id="tooltip-template" type="text/x-kendo-template">
    02.              <div id="tooltipContent" class="panel panel-primary">
    03.                  <div class="panel-heading">
    04.                      <h3 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span> Helpful Hint</h3>
    05.                  </div>
    06.                  <div class="panel-body">
    07.                      <div class="row">
    08.                          <div class="col-md-12">
    09.                              #=target.data('title')#
    10.                          </div>
    11.                      </div>
    12.                  </div>
    14.              </div>
    16.          </script>

    (You can hopefully see I am using bootstrap theme here as well) 

    The current tooltipReset function I have created functions like this: 

    1.function tooltipReset(e) {
    3.    var contentpanel = $("#tooltipContent").first(".col-md-12").width();
    4.    e.sender.refresh();
    5.    e.sender.popup.wrapper.width(contentpanel);

    On top of this I have had to override the current styling to make sure my bootstrap panel appears as I want it without the black surround: 

    06..k-tooltip, .k-tooltip-content
    08.    color:#2a2828;
    09.    background:none !important;
    10.    background-color:transparent !important;
    11.    border:none !important;
    16..k-callout, .k-callout-w{
    17.    border:none !important;

    Now this shows a mini panel that floats as I require but I can't seem to get the size to dynamically expand/ contract based on the content being supplied. I tried setting the width to "auto" but this didn't seem to expand the right hand side so the text was either touching or overlapping the panel contents. 

    So is there a better way of doing what I want? 

    On top of that is there a better way to restyle the tool tips as the changes I have put in have affected other tool tips I have. These are not related to this like graph tool tips etc. 

    Thanks in advance. 

  2. Dimo
    Dimo avatar
    8321 posts

    Posted 25 Sep 2014 Link to this post

    Hello David,

    Generally, the ToolTip is not designed to change its dimensions in the show event, because at that time it is already visible. Even if you succeed to set some preferred size manually, the widget position on the screen (with regard to its target) will no longer be correct, so you will need to readjust that as well.

    I can provide you with the following example, which shows a somewhat hackish way to resize the ToolTip on the fly by hiding and showing it again, which will make it recalculate its position and size. You can customize it further to suit your needs.

    The code also shows how to apply custom styles to a particular ToolTip instance only.

    .myTooltip .k-tooltip-content
        color: #2a2828;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
    .myTooltip .k-callout,
    .myTooltip .k-callout-w
        border:none !important;
    <input type="text" id="test-input" value="foo" />
    <button type="button" class="k-button glyphicon-question-sign">Enter some text in the textbox (no spaces) and hover me</button>
        .Events(events => events.Show("tooltipReset").Hide("resetFlag"))
    <script id="tooltip-template" type="text/x-kendo-template">
        <div id="tooltipContent" class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span> Helpful Hint</h3>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        #= $("\\#test-input").val() #
        function setToolTipContent(e) {
            return kendo.template($("#tooltip-template").html())({});
        var hasClosed = false;
        function tooltipReset(e) {
            if (!hasClosed) {
                hasClosed = true;
                setTimeout(function () { e.sender.show(); });
            } else {
                hasClosed = true;
        function resetFlag(e) {
            hasClosed = false;


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. UI for ASP.NET AJAX banner
  4. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 26 Sep 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks for the response.

    Taking your thoughts into account and also hacking my code it does seem that the tooltip is not the most suitable task for this job so I have elected to use Bootstrap's popovers instead. This seemed a better way of trying to achieve what I wanted.

    But thanks for the info.

Back to Top