Get width of div with jquery and show in tooltip

Question

Hi all here I have an code that work well but I don't have idea how to show width pixel in tooltip...

Here is the code:

$(function() {
    //$( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
      revert: 'invalid', 
      helper:"clone",
      snap: "#drop_here td", 
      opacity: 0.7
    });
    $( "#drop_here td" ).droppable({
      // accept only from left div, 
      // this is necessary  to prevent clones duplicating inside droppable
      accept: '#left .draggable',
      drop: function( event, ui ) {
        // 4 append clone to droppable
        $( this ).append(
          // 1 clone draggable helper
          $(ui.helper).clone()
          // 2 make the clone draggable
          .draggable({
             containment:"#table",
            snap: "#drop_here td" 
          })
          // 3 make the clone resizable
          .resizable());
      }
    });
  });

So here I need to add .tooltip(); function in cloned divs and in tooltip to show: time = 2 pixel = 1 minut?

So is there some idea how I can do that.

Example: When hover on cloned div there must show time. Time is calculated based on width of div, where 2 pixel is 1 minut

Please help and sorry for my english is not very well. THANKS!

DEMO: http://jsbin.com/erofot/105

Answer 1

http://api.jquery.com/width/

Make sure you do this AFTER the elements have been layed-out, doing this too soon will cause it to return 0.

Answer 2

Something like this, just have to math...

.resizable({
            start: function( event, ui ) {
              if(!$(this).data("tooltipset")){  
                $(this).tooltip("destroy");
              }
            },
            stop: function( event, ui ) {

                $(this).attr("title", $(this).width());
                 $(this).tooltip();
            }
          }));