Tooltip width fixed by first tooltip that is displayed

[Troy]

I'm initializing tool tips for anchor tags that have a help data attribute like this:

contentContainer.kendoTooltip({
    filter: 'a[data-help]',
    showOn: 'mouseenter',
    content: function(evt) {
      return $('<div/>').text(evt.target.data('help')).html();
    }
  });

When I hover over an anchor tag that has a help data attribute, I see a tool tip that appears to be sized to hold the content. When I then hover over a different anchor tag that has a help data attribute, the tool tip displays at the same size...it does not scale to fit the content. Consequently, if the first tool tip only displays a few words, and the next tooltip displays a paragraph, the paragraph is forced into a skinny tooltip that makes it hard to read. Is there a way to tell the tooltip to auto scale based on the content it receives?

[Dimiter Madjarov]

Hi Troy,


To achieve dynamic width for the Tooltip, you could bind to the show event and set the width manually to auto.

E.g.

show: function(e){
    this.popup.wrapper.width("auto");
}

 

Greetings,
Dimiter Madjarov
the Telerik team

[Douglas]

This does not work for width in 2014.2.716, while it does work for height.

[Dimiter Madjarov]

Hello Douglas,


This should be the default behavior if the tooltip is initialized without an explicitly set width, as in the following example.

Is this the expected behavior in the current case?

Regards,
Dimiter Madjarov
Telerik

 

 

[Larry]

This doesn't quite work. The tooltips in the container will have the width of the content of the -last- tooltip in the container. 

[Larry]

Dimiter's solution doesn't quite work. The content of the container'slast tooltip will set the width of all tooltips in the container.

[Dimiter Madjarov]

Hello Larry,


Could you please provide additional information about what exactly is the issue that you are experiencing and what is the expected behavior?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

 

 

[Gary]

I find this post very useful.  Thank you. I do agree that the auto-width works but auto-height does to a certain extent.  The auto-width and auto-height works perfectly for image files.  Text with e.g. spaces (and perhaps "-") appears "tall and slim" while text with none of these appears great with the auto size.  I have attached a few examples in the png file but I've blanked out some sensitive text.

Below are my codes.  If I put .width(420) within the @(Html.Kendo().Tooltip() block, it looks better but then I'm fixing the width.

Any feedback/help would be much appreciated.  Many thanks in advance.

@(Html.Kendo().Tooltip()
    .For("#placeholders")
    .Filter("span")
    .LoadContentFrom("_PopupContent", "Admin")
    .Position(TooltipPosition.Right)
    .Events(events => events.RequestStart("requestStart"))
    .Events(events => events.Show("autoToolTipSize"))
)
<script type="text/javascript">
    function requestStart(e) {
        e.options.data = {
            id: e.target.data("spid")
        }
    }

    function autoToolTipSize(e) {
        this.popup.wrapper.width("auto");
        
    }

[Dimiter Madjarov]

Hello Gary,

A sample approach to handle all of the cases would be to set a min-width instead of the auto width.
E.g.

function autoTooltipSize() {
   this.popup.wrapper.css("min-width", "100px");
}

Regards,
Dimiter Madjarov
Telerik

 

 

[Gary]

Many thanks Dimiter, it works :)