Enhance the numerical value displayed in jQuery UI tooltips

Question

Enhance the numerical value displayed in jQuery UI tooltips

I have folders with tooltips displaying text like '0 entries' or '5 entries' and so on. I am looking for a way to dynamically update this tooltip number every time an item is added to the folder. The initial count may not always start at zero, and I need each individual drop div to be updated accordingly as I have multiple folders. You can see a working example here: http://jsfiddle.net/4ehSG/3

jQuery

$(document).tooltip();

var dropped = 0;

$(".draggable").draggable();
$(".droppable").droppable({
    drop: function(event, ui) {
        dropped++;
        $(this)
            .attr('title', dropped + ' entries')
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
        $(".draggable").fadeOut();
    }
});

HTML

<div class="draggable ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div class="droppable ui-widget-header" title='2 entries'>
    <p>Drop here</p>
</div>

javascript jquery html css tooltip

Answer 1

Answer №1

Check out this code snippet for a cool example: http://jsfiddle.net/4ehSG/9/

  drop: function( event, ui ) {
      var dropped = parseInt($(this).attr('title')) + 1;
      $( this )
      .attr('title',dropped+' entries')
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
      $( ".draggable" ).fadeOut();
  }

Answer 2

Check out this code snippet for a cool example: http://jsfiddle.net/4ehSG/9/

  drop: function( event, ui ) {
      var dropped = parseInt($(this).attr('title')) + 1;
      $( this )
      .attr('title',dropped+' entries')
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
      $( ".draggable" ).fadeOut();
  }

Answer 3

Answer №2

If you want to increment a variable every time an element is dropped, you can follow this example:

Give it a try with the following code snippet:

$(document).tooltip();
var count = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html( "Dropped!" );
        count++;

        $( "#draggable" ).fadeOut();
        $( "#droppable" ).attr("title", count + " entries");
  }
});

Your modified version in action: http://jsfiddle.net/4ehSG/4/

Answer 4

If you want to increment a variable every time an element is dropped, you can follow this example:

Give it a try with the following code snippet:

$(document).tooltip();
var count = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html( "Dropped!" );
        count++;

        $( "#draggable" ).fadeOut();
        $( "#droppable" ).attr("title", count + " entries");
  }
});

Your modified version in action: http://jsfiddle.net/4ehSG/4/

Answer 5

Answer №3

To manage multiple instances of both droppable and draggable, consider assigning an array to each droppable. This approach eliminates the need for a count object and allows you to drop the same draggable on multiple droppable elements.

DEMO

$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        if(!$(this).data('droplist')){ //check for array
            $(this).data('droplist', []); //if doesn't exist, create array
        }
        var droplist = $(this).data('droplist'),
            drag = $(ui.draggable)[0];

        if(droplist.indexOf(drag) === -1) //check if element exists in array
            droplist.push(drag);

        $( this )
        .addClass( 'ui-state-highlight' )
        .find( 'p' )
        .html( 'Dropped!' )
        .end()
        .attr('title', droplist.length + ' entries');

         $(this).data('droplist', droplist); //set list
    }
});

Answer 6

To manage multiple instances of both droppable and draggable, consider assigning an array to each droppable. This approach eliminates the need for a count object and allows you to drop the same draggable on multiple droppable elements.

DEMO

$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        if(!$(this).data('droplist')){ //check for array
            $(this).data('droplist', []); //if doesn't exist, create array
        }
        var droplist = $(this).data('droplist'),
            drag = $(ui.draggable)[0];

        if(droplist.indexOf(drag) === -1) //check if element exists in array
            droplist.push(drag);

        $( this )
        .addClass( 'ui-state-highlight' )
        .find( 'p' )
        .html( 'Dropped!' )
        .end()
        .attr('title', droplist.length + ' entries');

         $(this).data('droplist', droplist); //set list
    }
});

Answer 7

Answer №4

VIEW DEMO

$(document).tooltip();

var total = 0;

$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        total++;
        $(this)
            .attr('title', total + ' items')
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
        $("#draggable").fadeOut();
    }
});

Answer 8

VIEW DEMO

$(document).tooltip();

var total = 0;

$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        total++;
        $(this)
            .attr('title', total + ' items')
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
        $("#draggable").fadeOut();
    }
});

Answer 9

Answer №5

To set a title value in JavaScript, you can utilize the code below:

document.getElementById('droppable').title = value;

This piece of code achieves the task without relying on jQuery.

However, if you prefer to use jQuery for this purpose, utilize the following code snippet:

$("#droppable").attr( 'title', value );

Answer 10

To set a title value in JavaScript, you can utilize the code below:

document.getElementById('droppable').title = value;

This piece of code achieves the task without relying on jQuery.

However, if you prefer to use jQuery for this purpose, utilize the following code snippet:

$("#droppable").attr( 'title', value );

Enhance the numerical value displayed in jQuery UI tooltips

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Storing the information received from an API as an HTML element

React and Express are two powerful technologies that work seamlessly

The initial value for React input is vacant and is not capturing either the state or the prop value

Scan for every header tag present and verify the existence of an id attribute within each tag. If the id attribute is absent, insert

Issue with margin-top in combination with clear:both does not function as expected

Using a Material-UI component to activate a React Router Link

Issue with Angular: event.key doesn't register as shft+tab when pressing Shift+Tab key

Change URL link after login user with javascript

Resetting values in Javascript and JQuery when clicking a button

What is the reason for instanceof Map returning false?

To determine if an AJAX request is synchronous or asynchronous using Browser Developer Tools

The jQuery selectors are not able to identify any dynamically generated HTML input elements

How would the input value change if the clock time changed?

What is the best way to adjust the height of a side-panel to match the dynamic

Troubleshooting issues with jQuery plugin functionality post-upgrade

Managing User Sessions in Meteor

Discover how to efficiently load and display a JSON array or object using JavaScript

Ways to verify if a minimum of three letters in each variable correspond

Creating Responsive Headers Using CSS for Mobile Devices

Tips for utilizing promises to create automated waiting for a function's completion in node.js/javascript