Search jQuery

jQuery Forum

creating a popup or tooltip on a mouse enter

in Using jQuery • 5 years ago

I have this function that came with a responsive image map program - I'm not at all proficient with jQuery, but learn as I pick it apart. I would like to run either a popup or a tooltip with a close button instead of an alert, and using mouse enter, (I guess?) so that it won't go away unless the close button is clicked.

$('area#eastWin').on('mouseover', function() {
alert($(this).attr('alt') + ' clicked');
});

Can some kind soul help me with this?

Forever grateful,

Replies(11)

jakecigar

Re: creating a popup or tooltip on a mouse enter

5 years ago

Tooltip code is very old fashioned. The modern way to do them is with CSS.

A Simple CSS Tooltip • Chris Bracco and many more can be found googling for "CSS only tooltip".

JΛ̊KE

jakecigar

Re: creating a popup or tooltip on a mouse enter

5 years ago

I just tried some of the CSS tooltips mixed with an <area> in a <map>. I found that it doesn’t work.

You should try the title attribute for the most simple tooltip. Or a plugin like Tooltipster - The jQuery Tooltip Plugin. Or any other by searching "jQuery tooltip".

JΛ̊KE

watusiware

Re: creating a popup or tooltip on a mouse enter

5 years ago

Bootstrap 4 has a very nice tooltip and popup components.

But you don't need to use Bootstrap to use it. They adopted popper.js:

https://popper.js.org/

If you want tooltips (and not just popups) you will need their tooltip component tooltip.js as well:

https://popper.js.org/tooltip-examples.html

These are recently-written (project started mid 2016) well-maintained, written using modern Javascript code, and incorporated (or available wrappers) in a large number of bigger "framework" projects. (Such as Bootstrap 4.)

glennnall1

Re: creating a popup or tooltip on a mouse enter

5 years ago

as you have noticed, css won't work with this, as it's an <area> on an image map. I tried all day yesterday to find something I can incorporate into the very necessary js function (it's part of another function).

as stated, I'm not very adept at jQuery, I just wanted to do something with an image map I'm going to use containing a large number of areas.

plus, several that i have tried have conflicted with the present jquery function. That's why I thought it would be simplest to know how to call a popup instead of an alert. That wouldn't conflict if i'm using the function that's already there.

thanks, tho

watusiware

Re: creating a popup or tooltip on a mouse enter

5 years ago

There are a zillion popup plugins and scripts. Pick one that you like. Make sure it is not ancient, and is currently-supported. I offered my suggestion above.

You likely won't find a popup plugin/script that deals with image maps. You will have to write some JS to detect the mouse or touch over areas, and use it to trigger the popup or tooltip.

Alerts should not be used in production websites. IMO, they should NEVER be used, period. (Debugging should be done with console.log() not with alert()).

I can't imagine why you want this though. You would have popups flying everywhere, and then the user having to painfully close each one.

"plus, several that i have tried have conflicted with the present jquery function."

We can't guess what "several that I have tried" are, nor what "the present jquery function" is.

glennnall1

Re: creating a popup or tooltip on a mouse enter

5 years ago

this

$('area#eastWin').on('mouseover', function()

is the trigger.

"I have this function that came with a responsive image map program." It IS a plugin/script that deals with image maps. It IS an image map (js) program.

I don't want to use the alert that it calls. I want to replace the alert with a popup. that's all I'm asking about.

I'm sorry i wasn't very clear.

jakecigar