Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Set the width of a tooltip.

    I have a the following code for displaying a tooltip:

    Code:
    <a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display">
    The javascript for the tooltip is as follows:

    Code:
    $(document).ready(function(){
    
        $("a.tooltip").live( {
            mouseenter:
                function(e){
                    this.t = this.title;
                    this.title = "";
                    $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                    $("#tooltip")
                        .css("top",(e.pageY - 10) + "px")
                        .css("left",(e.pageX + 20) + "px")
                        .fadeIn("fast");
                    var css_width = $('#tooltip').width();
                    var text_width = $('#tooltip').textWidth();
                    if (css_width > text_width) {
                        $('#tooltip').width(text_width);
                    }
                },
            mouseleave:
                function(){
                    this.title = this.t;
                    $("#tooltip").remove();
                }
            }
        );
    
    });
    
    $.fn.textWidth = function textWidth() {
        var html_org = $(this).html(); 
        var html_calc = '<span>' + html_org + '</span>'; 
        $(this).html(html_calc); 
        var width= $(this).find('span:first').width(); 
        $(this).html(html_org); 
        return width;
    }
    What I want to do is to be able to add another variable 'width' to be able to set the width of the tooltip like so:

    Code:
    <a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display">
    This width will then be passed into the javascript above and used to set the width of the tooltip.

    How can I modify the above code to do this??

    Thanks

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    jQuery makes extensive use of the custom "data-" attributes. So you can use them to pass along extra data.

    HTML
    Code:
    <a ..... data-width="100" ...>
    Javascript
    Code:
    var widthFromAnchor = $('a.tooltip').data('width');

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent this works.

    But I notice that when I have two tool tips on the one html page and they have different lenghts like so:
    Code:
    <a style='margin-left: 10px; position:relative' class="tooltip" data-width="300" title="This is some text to display">
    
    <a style='margin-left: 10px; position:relative' class="tooltip" data-width="100" title="This is some other text to display blah blah">
    I notice that the lenght of the tooltip is always the length of the first one I set.

    My javascript is like so:
    Code:
    $(document).ready(function(){
    
        $("a.tooltip").live( {
            mouseenter:
                function(e){
                    this.t = this.title;
                    this.title = "";
                    $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                    $("#tooltip")
                        .css("top",(e.pageY - 10) + "px")
                        .css("left",(e.pageX + 20) + "px")
                        .fadeIn("fast");
    
    		var data_width = $('a.tooltip').data('width');
                    if(data_width != null){
    		  $('#tooltip').width(data_width);
    		} else {
                      var css_width = $('#tooltip').width();
                      var text_width = $('#tooltip').textWidth();
                      if (css_width > text_width) {
                        $('#tooltip').width(text_width);
    		  }
                    }
    		
                },
            mouseleave:
                function(){
                    this.title = this.t;
                    $("#tooltip").remove();
                }
            }
        );
    
    });
    Any ideas???
    Last edited by wanting2learn; 03-20-2012 at 05:58 PM.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Yes, because you are trying to access the wrong element for data-width. With $('a.tooltip').data('width') you are accessing the data-width attribute of the first element in the jQuery collection. But you want to access the data-width attribute of the current element (the element currently being hovered). That's what the "this" keyword is for
    Code:
    var data_width = $(this).data('width');

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    try this:

    Code:
    $(document).ready(function(){
    
        $("a.tooltip").live( {
            mouseenter:
                function(e){
                    this.t = this.title;
                    this.title = "";
                     in = $("this").eq();
                    $("body").append("<p id='tooltip"+in+"'>"+ this.t +"</p>");
                    $("#tooltip"+in)
                        .css("top",(e.pageY - 10) + "px")
                        .css("left",(e.pageX + 20) + "px")
                        .fadeIn("fast");
    
    		var data_width = $(this).data('width');
                    if(data_width != null){
    		  $("#tooltip"+in).width(data_width);
    		} else {
                      var css_width = $("#tooltip"+in).width();
                      var text_width = $("#tooltip"+in).textWidth();
                      if (css_width > text_width) {
                        $("#tooltip"+in).width(text_width);
    		  }
                    }
    		
                },
            mouseleave:
                function(){
                    this.title = this.t;
                   $("#tooltip"+in).remove();
                }
            }
        );

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply, I trued your code and yes it does adjust the width, but I lost the color formating for the tooltip, (It just appeared grey).

    I changed your original post from:
    var widthFromAnchor = $('a.tooltip').data('width');
    to this:
    var widthFromAnchor = $(this).data('width');

    And this now works as intended.

    Thanks for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •