"Effortlessly position a tooltip div at the top and conceal it with ease

Question

"Effortlessly position a tooltip div at the top and conceal it with ease

I need assistance with the code snippet found at http://jsfiddle.net/VmXU9/34/.

$(".click").click(function() {
    var s = $(this).offset();
    left = s.left + $(this).width();
    $("#THREE").css({
        'opacity': 0.80
    });


    $("#THREE").css(s);
    $("#THREE").css({
        left: left
    });

});

My goal is to adjust the top and left positions of the yellow <div>, such as setting them to left: 10px, top: -20px. Additionally, I want it to hide when clicking outside of the element. How should I go about accomplishing this?

javascript jquery html css

Answer 1

Answer №1

One way to achieve this is by using the following code snippet:

$(document).ready(function() {
   $(document).click(function(event)    {
        var $box = $("#myBox");

        // Check if the click occurred outside the box and hide it
        if(event.target != $box.get(0)) {
            $box.hide();
        }
   });
});

Answer 2

One way to achieve this is by using the following code snippet:

$(document).ready(function() {
   $(document).click(function(event)    {
        var $box = $("#myBox");

        // Check if the click occurred outside the box and hide it
        if(event.target != $box.get(0)) {
            $box.hide();
        }
   });
});

"Effortlessly position a tooltip div at the top and conceal it with ease

Answer №1

Similar questions

Issue with THREE.meshphongmaterial: Causing Objects to Appear Black

retrieving the outcome from a PHP script invoked through Ajax

Choose the identical selection once more from a drop-down menu using JQuery

Performing a task once elements are added to an array

What is the best way to redirect to a specific page when logging out of a website?

"The TextInput component in ReactNative is preventing me from inputting any text

Creating scalable controllers in ExpressJS

Is there a way to reveal multiple inputs by simply pressing a button?

Innovative text input recommendation provider

Issue: The object identified as #<Object> does not contain the 'toUpperCase' method

The issue with border radius property on the scrollbar of a bootstrap dropdown menu

Utilizing regex to eliminate irregular spaces and achieve an equal number of spaces in a character array

The Node program does not pause for the loop to finish executing

Tips for adding spaces or tabs in text with HTML/CSS

Issue with offset calculation in bootstrap table occurs when the bootstrap-table is closed and the window is resized

Encountering an error when attempting to access an object property dynamically by using a passed down prop as a variable in Vue 2 & Vuex

Tips for incorporating various Vue Js components into an outdated system

How can I apply various textures in three.js?

Display a button only when hovering over it

Every time I attempt to send a PUT request using AJAX, I encounter an error