Creating a tooltip using only Javascript (displaying/dismissing on click)

Question

Creating a tooltip using only Javascript (displaying/dismissing on click)

I am searching for JavaScript plugins, without using jQuery, that will help me create a basic tooltip feature.

What I want is to be able to click on an image and have a div appear below the image with some text inside along with a triangle in one corner. However, despite my efforts in searching on Google, I have not found anything that fits this criteria.

I am looking to make it so when the image is clicked, the information appears, and when the same image is clicked again, it should disappear. But I am struggling to figure out how to achieve this functionality.

javascript html css dom-events tooltip

Answer 1

Answer №1

If you're open to utilizing jQuery without relying on a plugin, achieving this effect is quite straightforward.

http://jsfiddle.net/RHW9C/

var isVisible = false;
$("#container").hover(function(){
    if (!isVisible){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn();
        isVisible = true;
    }
},function(){
    if (isVisible){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){isVisible=false});
    }
});

To trigger the action on click instead of hover:

http://jsfiddle.net/RHW9C/1/

var isVisible = false;
$("#container").click(function(){
    if (!isVisible){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn(function(){isVisible = true;});
    }
    if (isVisible){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){isVisible=false});
    }
});

Answer 2

If you're open to utilizing jQuery without relying on a plugin, achieving this effect is quite straightforward.

http://jsfiddle.net/RHW9C/

var isVisible = false;
$("#container").hover(function(){
    if (!isVisible){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn();
        isVisible = true;
    }
},function(){
    if (isVisible){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){isVisible=false});
    }
});

To trigger the action on click instead of hover:

http://jsfiddle.net/RHW9C/1/

var isVisible = false;
$("#container").click(function(){
    if (!isVisible){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn(function(){isVisible = true;});
    }
    if (isVisible){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){isVisible=false});
    }
});

Creating a tooltip using only Javascript (displaying/dismissing on click)

Answer №1

Similar questions

The simplest method to make HTML elements inaccessible to the Simple HTML Dom Parser in PHP

Swapping the image source using a Vue dropdown menu

How can I generate a list of separate words from innerText using JavaScript?

What could be causing the issue of undefined component props in Vue Router?

The raycaster in Three.js seems to be having trouble selecting the correct object

Creating a responsive background image inside a div using Twitter Bootstrap

Tips for Implementing Conditional Statements in SoundCloud API JavaScript Functions

PHP and MySQL pagination made easy with CSS styling

JkMegaMenu drop-down menus in Chrome are shifting to the left when the window is resized

Ways to properly release file descriptors in write streams

Dynamic elements fail to trigger JS function calls

Unexpected response received from ajax call when supplying data to flot.js

Leveraging the power of PHP sessions within jQuery/HTML/Ajax

Enhancing Child Elements with CSS - Evaluating Rating Systems

Angular 6 - Unlocking the Secrets of Filtered Results

Moving images displayed on a webpage

Creating a User Interface for a Selenium script using Python: A Step-by-Step Guide

What impact does the return value of jQuery's .not() have on the .hide() method?

Could anyone clarify the equation for me?

Problems with installing ambient typings