Is there a way to temporarily turn off the hover effect on a div element?

I'm in the process of designing a webpage and I've implemented a popup functionality that opens when I hover over a specific div, and closes when I move away from it. However, I now want to add a feature where clicking on the div keeps the popup open without needing to hover over it. Can anyone help me achieve this? Thank you!

Here is the code snippet I am currently using:

HTML:

<div class="password-lost-tooltip" onclick="blockTooltip()">Lost password?
    <span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>

CSS:

.password-lost-tooltip {
    position: relative;
    display: inline-block;
    position: fixed;
    top: 55px;
    left: 380px;
    font-family: 'Nunito', sans-serif;
    font-size: 15;
    text-decoration: none;
    transition-duration: 0.3s;
    color: grey;
}

.password-lost-tooltip:hover {
    color: black;
    cursor: pointer;
}

.password-lost-tooltip .password-lost-tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: fixed;
    top: 49px;
    left: 610px;
    margin-left: -60px;

    opacity: 0;
    transition: opacity 0.3s;
}

.password-lost-tooltip .password-lost-tooltiptext::after {
    content: "";
    position: fixed;
    transform: rotate(90deg);
    top: 57.5px;
    left: 542.5px;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.password-lost-tooltip:hover .password-lost-tooltiptext {
    visibility: visible;
    opacity: 1;
}
javascripthtmlcss

Answer №1

To control the visibility of a div, you can use onClick and onBlur events to add or remove a specific class. This class can then be styled in your CSS to adjust the visibility as desired.

For a real-world example, take a look at this code snippet:

function showTooltip () {
  document.querySelector('.example-tooltip').classList.add('displayTip');
}

function hideTooltip () {
  document.querySelector('.example-tooltip').classList.remove('displayTip');
}
.example-tooltip {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

.example-tooltip .tooltip-text {
    visibility: hidden;
    width: 150px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.example-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.example-tooltip.displayTip .tooltip-text {
    visibility: visible;
    opacity: 1;
}
<div class="example-tooltip" onclick="showTooltip()" onblur="hideTooltip()">
        Hover over me
        <span class="tooltip-text">This is a tooltip</span>
</div>

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

Vue displaying element tags without proper color rendering

Currently, I am using Vue3 in VS Code and encountering an issue where the colors of the Vue tags appear as white, making it difficult for me to differentiate between the template, script, and style tags. If you would like to take a look at the code sample ...

javascriptvue.jsvuejs3vscode-extensions

Is there a way to restore the face's original orientation after it has been rotated

Just to note, I am aware that this question has been asked before. However, the previous answers did not address my specific situation and requirements. Currently, I am developing a Rubik's cube using three.js. To achieve lifelike rotations, I am rot ...

javascriptthree.jsnormals

There are no connection events being triggered - using Mongoose version 4.7.1 with Express

My current struggle involves establishing a connection from my express app to MongoDB via Mongoose. Despite the simplicity of the setup, which is as basic as it gets: var mongoose = require('mongoose'); mongoose.connect('mongodb://localhos ...

javascriptnode.jsmongodbexpressmongoose

Saving resources with a promise in Angular

I am facing a challenge while trying to handle a promise from the angular $resource save function. According to the documentation, I should be able to access the raw $http promise by using the $promise property on the returned object. Here is an example: ...

javascriptangularjsangular-promiseangularjs-ng-resource

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

Context In my project, I am working with a plain JavaScript array that starts off empty but gets populated with Knockout observables later on. These values are numbers and I need to compare them with values in another Knockout observable array. The issue ...

javascripthtmlknockout.jsko.observablearray

Creating custom animations for ngShow and ngHide directives using ngAnimation

After following the lesson at https://docs.angularjs.org/api/ngAnimate, I managed to get the CSS-based animations working properly. However, I encountered an issue where all DOM elements using ng-show/ng-hide were affected by the animation. I only want a s ...

javascriptangularjsanimationng-animate

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Trying to figure out how to remove a dragged element from the DOM after a successful drop using the native JavaScript drag and drop API. After attempting to listen for the drop event, it seems that it only fires on the element being dropped onto and does ...

javascripthtmldrag-and-drop

Steps for creating a read-only Material-UI input text field in Angular 12

I'm looking to create a read-only text field using Material-UI that cannot be edited. I attempted to achieve this by disabling it in the .ts file of the component: this.firstFormGroup.controls['gauthan_nirmit'].disable(); However, when I m ...

htmlangulartypescriptmaterial-ui

The date time chart in high charts is not displaying the X-Axis width correctly

Currently, I am utilizing the high charts library to display a date-time column chart. However, there seems to be an issue with the x-axis not displaying the exact starting value for the chart. In the example provided below, it is necessary to adjust the b ...

javascripthighcharts

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

Edit 7/16/15: I decided to place the following code between the <li> tags within the joyride that required the removal of the "x" button: <script>$('.joyride-close-tip').remove();</script> While not the most elegant solution ...

csssasszurb-foundationzurb-joyride

Unable to alter the state of a single item using multiple inputs within a form component

I have a form that requires some input fields to be stored in an object. Everything seems to work fine except for the date input field. // Input handler const [values, setValues] = React.useState({ applicant: '', position: '', ...

javascriptreactjs

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

javascripthtmlcssfontsescaping

Error: The function $rootScope.$on is not defined within the Connectivity Factory

I am facing an issue with my Ionic app while trying to run it in offline mode. The error message "services.js:392 Uncaught TypeError: $rootScope.$on is not a function" appears when I launch the app. Can someone please explain why this is happening and what ...

javascriptangularjspluginsionic-framework

The PHP script to modify a MySQL database fails to make any updates

I am having an issue with my code for updating a MySQL database. The code runs without errors, but when I check the records in phpMyAdmin, the database is not being updated. Can someone please assist me with this? $database = "carzilla"; $con = mysql_c ...

phpmysqlhtml

Unreliable Raycasting with Three.js

I am attempting to identify clicks on my Plane mesh. I have established a raycaster using provided examples as instructions. Below is the code snippet: http://jsfiddle.net/BAR24/o24eexo4/2/ Clicks made below the marker line do not register, even if they ...

javascriptthree.js

Encountering an "undefined" error while implementing a registration system in Node.js and attempting to retrieve

Having recently delved into the world of javascript and nodejs, I am currently working on developing a registration system. The issue I'm facing is related to an error message indicating that "isEmail" is undefined. I have included my form validator a ...

javascriptnode.jsexpressmomentjs

Firebase: Database and Storage - the art of efficiently linking images to posts | Vue.js

React Redux MongoDB I have developed a platform for users to share text and an image with their posts. Currently, I am assigning the complete URL of the image associated with each post using post.postPicture. This method is functional. The images are sav ...

javascriptfirebasevue.jsgoogle-cloud-firestorevuex

Tips on using the ref attribute in Vue.js to focus on an input element

In my Vue.js component for 2FA, I have implemented the following structure: <template> <div :class="onwhite ? 'on-white' : ''"> <input :id="`n1`" ref="n1" v-model=&quo ...

javascriptvue.jsfrontendnuxt.js

Issue with saving cookie from Express.js backend to Nuxt.js frontend

After successfully creating an authorization server using Express.js, I encountered a problem when trying to save the access and rotating refresh tokens as signed cookies. The issue arose from having separate backend and frontend servers with different dom ...

javascriptnode.jsexpresscookiesnuxt.js

PHP Calculator with Dynamic Calculations

I need to create an order form that updates the tax and total automatically once a quantity is entered into the text box. Should I use PHP or JavaScript for this functionality? Let's assume, for instance, that the tax rate is 0.3% My requirements: ...

javascriptphpjquery