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>
javascriptjqueryhtmlcsstooltip

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

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 №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 №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 №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 );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to pass a null parameter with jquery's .ajax method

I am facing the following scenario function AddData(title, id) { $.ajax({ type: "POST", url: "topic.aspx/Add", data: JSON.stringify({ "title": title, "id" ...

jqueryajaxjson

Column Locking with Merged Rows

I have implemented row spanning in jqgrid by following the instructions provided in this answer: Jqgrid - grouping row level data However, I am facing an issue where setting a column with row span to frozen = true causes the overlay to lose the row spanni ...

javascriptjqgrid

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Issue: unable to inject ngAnimate due to uncaught object error

Whenever I attempt to inject 'ngAnimate' into my app, I encounter issues with instantiation. Here is the code snippet in question: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanit ...

javascriptangularjsangular-uibowerng-animate

Move information from one page to another

I'm currently using Ionic 2 and attempting to pass data from one page to another. Specifically, I want to transfer the data of a selected list item from the first page (quickSearch) to the second page (quickSearchDetail). To illustrate this, refer to ...

javascriptangulartypescriptionic2

Encountering an issue when trying to use SVG clip-path in Safari

I'm currently experimenting with creating a unique hexagonal border around a button. My approach involves enlarging the container element by a few pixels compared to the button size and using the same clip-mask on both elements to achieve a bordered e ...

htmlcsssvgsafariclip-path

After the form submission, my Next.js component keeps rendering repeatedly in a cumulative manner

I am currently working on a memory game application using Next.js, Node.js, and Express.js. I seem to be encountering an issue specifically with the login page. Initially, there are no issues when submitting the form for the first time. However, after the ...

javascriptreactjstypescriptnext.js

What is the best way to record data while initiating a process in node.js?

In my latest project, I have implemented a function that spawns a process and requires logging specific information to the console. Here is an example of how this function is structured: function processData(number) { var fileName = settings.file || "de ...

javascriptnode.js

What is the best way to display noscript content within my Angular application?

What is the best way to show HTML content for users who do not have JavaScript enabled in my Angular application? Inserting the noscript tag directly into the index.html file does not seem to be effective. <body> <noscript>Test</noscrip ...

htmlangularnoscript

Display validation in HTML5 only when the form is submitted

Here is the code snippet I am referring to: <input required pattern="[0-9]{5,10}" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Type something')" /> I'm looking for a way to remove o ...

javascriptjqueryhtmldom

Troubleshooting AJAX hover functionality issue

Here is the content that loads through AJAX: <div class="grid"> <div class="thumb"> <img alt="AlbumIcon" src="some-image.jpg"> <div style="bottom:-75px;" class="meta"> <p class="title">Title< ...

htmlajaxjquery

What is the best way to showcase a value in JavaScript using CSS styling?

I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below: a.innerHTML = "We are Open now now."; a.innerHTML = "We are Closed, arm."; Additionally, I want to appl ...

javascripthtmlcss

Excessive CPU/GPU usage caused by CSS transition animations

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

htmlcssperformancecss-transitions

Ensure that all asynchronous code within the class constructor finishes executing before any class methods are invoked

Looking to create a class that takes a filename as a parameter in the constructor, loads the file using XmlHttpRequest, and stores the result in a class variable. The problem arises with the asynchronous nature of request.onreadystatechange, causing the ge ...

javascriptasynchronouscallbackxmlhttprequestes6-class

The input type file is not correctly inserting an image into the image tag

While I was working on a project, I had a question that got answered but now I need to find a different way to use the solution. I have created a jsFiddle to demonstrate how it currently works. You can view it here: http://jsfiddle.net/TbZzH/4/ However, w ...

javascriptjqueryimagefileinput

How to change the focus on a Material UI input field

I am facing an issue with resetting/clearing an input field using a button click: Take a look at the code here for reference. const searchInput = useRef(null); const clearInput = () => { searchInput.current.value = ''; searchInput ...

javascriptmaterial-ui

Tips for preventing the need to create a function within a loop

Currently, I am in the process of collecting data through REST calls. I have created a function that accesses a "directory" endpoint to retrieve a list of individuals. While I can easily obtain details about their children, I need to make individual AP ...

javascriptjqueryajaxgulpsuperagent

Is it possible to include a JavaScript script in a Laravel Blade file?

I have an Auth module from nwidart/laravel-Module. I am trying to include a script file in the Modules\Auth\Resources\views\layouts\app.blade.php file, like this: <body> ...... ... <!-- Scripts --> <script s ...

javascriptphplaravellaravel-bladevite

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

javascripthtmlcssweb

What determines which HTML file is loaded based on the user's browser?

I've been searching online but can't find a definite answer - is it possible to load different HTML based on the type of browser being used? In my specific case, this seems to be the only solution. After trying everything else, it looks like the ...

javascripthtmlloading