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

[Jelly Master]

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: 

1.@(Html.Kendo().Tooltip()
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")
8.)

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>
13.
14.              </div>
15.
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) {
2.
3.    var contentpanel = $("#tooltipContent").first(".col-md-12").width();
4.    e.sender.refresh();
5.    e.sender.popup.wrapper.width(contentpanel);
6.
7.}

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: 

01..k-tooltip
02.{
03.
04.}
05.
06..k-tooltip, .k-tooltip-content
07.{
08.    color:#2a2828;
09.    background:none !important;
10.    background-color:transparent !important;
11.    border:none !important;
12.
13.}
14.
15.
16..k-callout, .k-callout-w{
17.    border:none !important;
18.}

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. 

[Dimo]

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.

<style>

.myTooltip,
.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;
}

</style>

<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>

@(Html.Kendo().Tooltip()
    .For(".glyphicon-question-sign")
    .Position(TooltipPosition.Top)
    .Animation(false)
    .Events(events => events.Show("tooltipReset").Hide("resetFlag"))
    .ContentHandler("setToolTipContent")
)

<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>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    #= $("\\#test-input").val() #
                </div>
            </div>
        </div>

    </div>

</script>

<script>

    function setToolTipContent(e) {
        return kendo.template($("#tooltip-template").html())({});
    }

    var hasClosed = false;

    function tooltipReset(e) {
        e.sender.popup.element.addClass("myTooltip");

        if (!hasClosed) {
            e.sender.refresh();
            e.sender.hide();
            hasClosed = true;
            setTimeout(function () { e.sender.show(); });
        } else {
            hasClosed = true;
        }
    }

    function resetFlag(e) {
        hasClosed = false;
    }

</script>

Regards,
Dimo
Telerik

 

 

[Jelly Master]

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.