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

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

2 Answers 1948 Views
This is a migrated thread and some comments may be shown as answers.
Jelly Master
Top achievements
Rank 1
Jelly Master asked on 23 Sep 2014, 10:35 PM
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.                    '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 Answers, 1 is accepted

Sort by
Telerik team
answered on 25 Sep 2014, 03:48 PM
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 () {; });
        } 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.

Jelly Master
Top achievements
Rank 1
answered on 26 Sep 2014, 09:12 AM
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.

Asked by
Jelly Master
Top achievements
Rank 1
Answers by
Telerik team
Jelly Master
Top achievements
Rank 1
Share this question