Tooltip width fixed by first tooltip that is displayed

10 posts, 0 answers
  1. Troy
    Troy avatar
    10 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2013 Link to this post

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

    Posted 27 Mar 2013 Link to this post

    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
    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. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 06 Nov 2014 in reply to Dimiter Madjarov Link to this post

    This does not work for width in 2014.2.716, while it does work for height.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 07 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Larry
    Larry avatar
    2 posts
    Member since:
    Dec 2014

    Posted 10 Dec 2014 in reply to Dimiter Madjarov Link to this post

    This doesn't quite work. The tooltips in the container will have the width of the content of the -last- tooltip in the container. 
  7. Larry
    Larry avatar
    2 posts
    Member since:
    Dec 2014

    Posted 10 Dec 2014 Link to this post

    Dimiter's solution doesn't quite work. The content of the container'slast tooltip will set the width of all tooltips in the container.
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 12 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Gary
    Gary avatar
    2 posts
    Member since:
    Nov 2014

    Posted 14 Jan 2015 Link to this post

    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");
            
        }



  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 16 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Gary
    Gary avatar
    2 posts
    Member since:
    Nov 2014

    Posted 16 Jan 2015 in reply to Dimiter Madjarov Link to this post

    Many thanks Dimiter, it works :)
Back to Top
Kendo UI is VS 2017 Ready