Display an image in a pop-up when hovering over it briefly

When you run the code snippet and hover over "Hover here", a picture of grumpy cat will appear, but the image flashes on and off repeatedly:

To see the image consistently, you may need to move your cursor away from "Hover here" and hover over it again.

$('[data-toggle="popover"]').popover(
  {
    trigger:'hover'
    ,html:true
  }
)
<div data-toggle="popover" data-content='<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">'>Hover here</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

javascriptpopper.js

Answer №1

It seems that the issue may be related to the dimensions of the <div>. When a fixed size is set, it appears to work perfectly.

$('[data-toggle="popover"]').popover(
  {
    trigger:'hover'
    ,html:true
  }
)
<div style="width:50px; heigth:50px;" data-toggle="popover" data-content='<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">'>Hover here</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Answer №2

It seems that the strange behavior you are noticing is due to jQuery automatically adding a div with the class of popover and an absolute position. This causes it to appear at the top left corner, leading to an unintended mouseout event on your "hover me" text.

To solve this issue, I recommend adjusting the behavior using event.relatedTarget. If the related target is a div with the .popover class, then prevent the mouseout event from affecting your "hover me" text. However, since you may not be able to directly modify this within jQuery, here is a fiddle demonstrating the concept:

https://jsfiddle.net/ibowankenobi/o4s5Lvz7/1/

div.popover {
  display:block;
  position:relative !important;
  top:200px !important;
}

The style is applied inline within the popover div added by jQuery, so I had to use !important to override it.

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

Transferring Specific Information to Individual Fancybox Instances

I'm currently in the process of integrating Fancybox 3 into my application. My goal is to create a custom button that performs specific functions for each instance, requiring additional data such as photoId and settingsId. To illustrate: HTML: Withi ...

javascriptjqueryangularjsfancyboxfancybox-3

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

javascriptcssiframeresponsive-designmedia-queries

When the image is clicked, an email notification should be received confirming that the image has been clicked

I'm a beginner in the world of PHP and AJAX, and I'm having trouble receiving emails. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"> function trigger() { $.ajax({ type: "POST", ...

javascriptphpjqueryajax

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

What is the best way to Retrieve Data and Manage State using Hooks?

I have a variable called resourcesData which contains 5 empty arrays and 3 arrays with objects of data. I am unsure of how to pass these 3 arrays with objects of data into useState and manage them. const resourcesData = data; https://i.sstatic.net/fuXhi.p ...

javascriptreactjsreact-hooks

Saving the data retrieved from a fetch request at a specified URL into a variable in JavaScript

I'm having some trouble loading data from a URL into a variable using .ready(). When I try to display the value in an alert box, it shows up as undefined. Can anyone offer some guidance on how to fix this? const fetchMasterProd = () => { ...

javascriptjqueryjson

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

javascriptjqueryhtmlcsshorizontal-scrolling

A simple guide on passing a variable from Node.js to the view

Currently, I am delving into the world of Node.js and encountering a hurdle in sending a variable from app.js to index.html without relying on Jade or any other template engine. Below is my implementation in app.js: var express = require("express"); var ...

javascriptnode.jsexpress

using the useEffect hook to create a loop that runs infinitely

For my project, I am working on updating data in firebase. The issue that I'm facing is that the data seems to be constantly looping, causing potential crashes. Is there a way to stop this loop and prevent any crashing? import "./App.css"; ...

javascriptreactjsfirebasereact-hooks

Issue with HTTP POST Headers in XmlHttpRequest

I am currently attempting to pass a string using the XmlHttp method. Let me provide you with the code for better understanding: HTML <div id="greetings"> You are voting out <b style="color: #00b0de;" id=roadiename></b>. Care to explain ...

phpjavascriptajaxxmlhttprequest

Generating fresh line with knockout effect

Currently in the process of developing a Single Page Application (SPA). Utilizing knockout and observable array to iterate through a json array. Encountering an issue where there are br tags present within the text, but when using data-bind="text: myVar" ...

javascriptjsonknockout.jssingle-page-applicationjavascript-databinding

Vuetify: The checkbox displays the opposite status of whether it is checked or unchecked

Can you help me simplify this problem: In my Vue.js template using Vuetify components, there is a checkbox present: <v-checkbox v-model="selected" label="John" value="John" id ="john" @click.native="checkit"> </v-checkbox> ...

javascriptvue.jsvuetify.jsnuxt.js

Tips for transferring express route handling to the subsequent middleware and bypassing the current block of code

Here's the current setup of my route handler in my express app: app.use('/', function(res, req, next) => { if (!authorised) next(); f1(); f2(); }); Is there a way to prevent f1() and f2() from running without adding conditional st ...

javascriptexpress

Close ui-bootstrap typeahead menu only when a row is manually chosen

I have set up this jsBin to show the problem I am facing. When you visit the link and try to type "Five," the expected behavior would be to type "Five" and then press tab. However, in this case, you need to type "Five" and then either escape or click outsi ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Having trouble with my Express app due to errors popping up because of the order of my routes

app.get('/campgrounds/:id/edit', async (req,res) =>{ const campground = await Campground.findById(req.params.id) res.render('campgrounds/edit', { campground }); }) app.get('/campgrounds/:id', async (req,res) =>{ ...

javascriptnode.jsmongodbexpressmongoose

Inter-service/module communication on a widget interface

We are in the process of creating a widget screen that contains various widgets/modules: Products: Displays a list of products Product Details: Retrieves product details from the server when a selection is made in the "Products" widget. Related Products: ...

javascriptangularjs

What techniques can be used to optimize Angular template integration and minimize http requests?

Situation: Our team is currently in the process of migrating an ASP.NET application from traditional WebForms to Web API + Angular. The application is primarily used in regions with limited internet connectivity, where latency issues overshadow bandwidth c ...

javascriptasp.netangularjsperformance

Is client-side rendering the new trend, bypassing traditional server-side rendering?

I'm exploring the idea of rendering my pages on the client side to reduce server load and minimize traffic. Typically, the first request to the server requires it to render the requested page and then send it to the user. Once the user interacts with ...

javascriptangularjsnode.jstemplate-engine

sending data between c# and javascript

Apologies for bringing up a question that may have been answered numerous times before. despite trying various methods as suggested, I am still unable to achieve the desired outcome. I have an ASP.NET application (server-side) and I aim to visualize resul ...

javascriptasp.netarraysparameter-passing

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs