Difficulty encountered in utilizing clearTimeout for undefined popover variable

I have implemented some coffeescript in users.js.coffee which successfully triggers a Twitter Bootstrap popover when hovering over a username. However, I am now looking to add a timeout functionality to automatically hide the popover if a user doesn't interact with it.

The issue arises when trying to implement the timeoutObj variable in my code. Upon scrolling over the popover, I receive an Uncaught ReferenceError stating that the timeoutObj is not defined. It seems like the problem lies within setting the variable in the mouseleave method.

$ ->
 let timeoutObj = undefined
 $(".comment-user-name").popover({
   trigger: "manual",
   placement: 'top',
   template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
 })
 $(".comment-user-name").mouseenter((event, ui) ->
   $(".comment-user-name").popover('show') 
 )
 $(".comment-user-name").mouseleave((event, ui) ->
   timeoutObj = setTimeout (-> $(".comment-user-name").popover('hide') ), 3000
 )
javascripttwitter-bootstraptimeoutcoffeescriptpopover

Answer №1

Here is the correct code snippet:

$ ->
      timeoutObj = null
      $(".comment-user-name").popover(
          {
          trigger  : "manual"
          placement: 'top'
          template : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
          }
      )

      $(".popover").onmouseover(
          (event, ui) ->
              clearTimeout(timeoutObj)
              $(this).mouseleave(-> $(this).hide())
      )
      $(".comment-user-name").mouseenter((event, ui) -> $(".comment-user-name").popover('show'))
      $(".comment-user-name").mouseleave((event, ui) -> timeoutObj = setTimeout (-> $(".comment-user-name").popover('hide') ), 3000)

Avoid using timeoutObj in 

'<div class="popover" onmouseover="...

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

Angular 2 System.config map leading to a 404 error message

I am encountering a 404 error in the browser console while attempting to map the Auth0 module from node_modules in my Angular 2 project using the system.config in the index file. Index File <!-- 2. Configure SystemJS --> <script> System.con ...

javascriptangularauth0

Make sure to correctly assign methods to their respective prototypes to avoid confusion

While working on my Electron app with jQuery, I keep encountering an error related to jQuery's tween function. I'm loading jQuery using standard node require: <script type="text/javascript>window.$ = window.jQuery = require('jquery&a ...

javascriptjquerynode.jselectronrequire

Displaying various images within a bootstrap modal window

I'm facing an issue with my gallery. It contains small images, and when a user clicks on a thumbnail, a modal should open with the full-size image. The problem is that even though I have the full-size images stored in the "/uploads/" folder and the th ...

javascriptphpjquerytwitter-bootstrap

The v-for directive is displaying my list in a single row with multiple columns instead of in a single column with multiple rows

Can someone please assist in rendering my list as shown below: A B C The current rendering looks like this: 1: A 2: B 3: C Below is the code snippet: To-Do List: <input type="text" class = "todo" placeholder = "Next Item" v-on:keyup.enter="add ...

javascripthtmlvue.js

Remove dynamically created elements from an AngularJS div

Is there a way to remove an item from the criteria list when clicking the delete button? Currently, only the filter is being refreshed and not the tables. Any suggestions on how to resolve this issue? HTML <ul class="list-unstyled"> <l ...

javascripthtmlangularjs

Utilize the RRule library in JavaScript by incorporating the rrule.min.js script

I am having trouble integrating the library https://github.com/jakubroztocil/rrule into my website. Whenever I try to do so, I encounter the error: Uncaught SyntaxError: Unexpected token { I have attempted the following: <!DOCTYPE html> <html ...

javascripttypescriptpython-dateutilrrulerecurring-events

Why am I unable to insert data into the 'sessions' database using connect-mongo?

I am utilizing connect-mongo in conjunction with express-session, and the session data is successfully being stored in Mongo. However, I want to enhance the sessions collection utilized by connect-mongo in order to include my own fields on top of it. I h ...

javascriptexpressmongooseexpress-sessionconnect-mongo

How can I use JavaScript regex to extract the first term to the left of a specific symbol?

Having a string in this format str = "Is toffee=sweet?" I need to retrieve the first term on the left side of =, which in this case is toffee. To accomplish this, I use the following code snippet: str.split("=")[0].split(" ").splice(-1,1)[0] This retu ...

javascriptregex

JS this, that, and then boggled my mind

Feeling a bit rusty at the moment; I have a few promises remaining that require access to a previous class, and I am striving to find the most elegant solution. Utilizing webdriverJS, this should cover all aspects of the driver... Thank you for your assis ...

javascriptclassselenium-webdriveres6-promise

Issue with Electron application encountered during relocation of build directory

Currently, I am developing an Electron-App using NPM that functions as an installer by unzipping a file to a specified directory. While everything works smoothly when I build the application and run it from the win-unpacked folder, moving the folder to a d ...

javascriptjquerynode.jsbuildelectron

The object failed to be transferred to another function in React

I am currently learning React and following a video tutorial. I have encountered an issue where an object cannot be passed to another method, but it works fine when I pass an ID instead. Here is the method: handleIncrement = (product) => { console. ...

javascriptreactjsobjectmethods

Implement Conditional Enabling of Forms in JavaScript or jQuery to Support Single Form Usage

I currently have four forms labeled as form-1, form-2, form-3, and form-4, along with three buttons named Button-1, Button-2, and Button-3. Upon loading the first JSP page, it displays form elements on the screen. My query pertains to clicking on button- ...

javascriptjqueryhtmlforms

Is a shifting background image possible?

Can anyone shed some light on how the dynamic background image on this website is created? Is it a JavaScript plugin, a simple .gif, or something else entirely? Appreciate any insights! ...

javascriptjquery

Tips for creating a popout feature for a YouTube player and getting the video to play

Currently, I am facing an issue with my YouTube player. Whenever I try to play a video using the YouTube API, it redirects to another page before starting playback. Is there a way to make the player pop out on the same page when a user clicks on an image, ...

javascriptjqueryhtmlangularjsyoutube

The data does not seem to be getting sent by the res.send() method in

I'm having trouble with the GET request not returning the data I expect. Here is my GET request code: router.get('/', (req, res) => { res.set('Content-Type', 'text/html') res.status(200).send(Buffer.from('<p& ...

javascriptnode.jsexpresssupertest

Differences Between JavaScript Binding and Anonymous Functions

I came across this code in the mongoose-deep-populate library async.parallel([ User.create.bind(User, {_id: 1, manager: 2, mainPage: 1}), Comment.create.bind(Comment, {_id: 3, user: 1}), ... ], cb) which utilizes Function.prototype.bind to make ...

javascriptnode.jsanonymous-function

The jQuery gallery is experiencing some functionality issues

Having an issue with the gallery on my website (currently on my computer, not yet uploaded to a server). Here is the script for the gallery (loaded from the server using PHP): $(document).ready(function() { $('.gallery').hide(); $(' ...

phpjavascriptjqueryhtml

Retrieve the user-inputted data from an Electron BrowserView's input field

Consider this scenario where a BrowserWindow is set up with specific security settings, including enabling the webviewTag: true for project requirements. let webPrefs = { plugins: false, nodeIntegration: false, nodeIntegrationInWorker: false, ...

javascriptnpmelectronchromium

Tips for dynamically refreshing a collection of radio buttons using jQuery Mobile?

If I have a set of 3 radio buttons like this: <label for="a-1">A</label> <input type="radio" name="a" id="a-1" value="1" /> <label for="a-2">A</label> <input type="radio" name="a" id="a-2" value="2" /> <label for="a- ...

javascriptjqueryjquery-mobileradio-buttonchecked

create an HTML element using JavaScript to display a box with dimensions of n

I am attempting to create a grid in an HTML document using only plain JavaScript. The idea is to take a number from a URL and use that as the basis for generating the grid. For example, if my URL looks like this: abc.html?num=5, then I would need to creat ...

javascripthtmlcss