/    Sign up×
Community /Pin to ProfileBookmark

Tooltips on image maps not working on laptop screens

Copy linkTweet thisAlerts:
Aug 13.2019

I have created a JS-based tooltip that works on image maps. The problem I am having though is that it does not work on small laptop screens or if the browser window is minimized. I would really appreciate some help on this one.

Here is a codepen sample, https://codepen.io/ArshRai/pen/LwRGvZ

I just can’t figure out what I need to do to make it work on minimized browsers and small screens.

to post a comment
HTMLJavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumAug 13.2019 — You should have described the issue more clearly. What I note on your codepen is that the tooltips pop up but they are not visible as they are outside the browser window.

I know that there are librarys for tooltips like tooltipster that position the TTs in an intelligent way so that they are visible independent of their position related to the edge of the browser window. However I'm not shure if tooltipster will work for an area element. Give it a try.
Copy linkTweet thisAlerts:
@SempervivumAug 13.2019 — PS: Tooltipster does work:

https://codepen.io/Sempervivum/pen/NWKxvyR
Copy linkTweet thisAlerts:
@ashbyauthorAug 13.2019 — Sorry, I should I described it better. Yes, tooltip does work, but it's not responsive, in the sense that it does not work properly on small screens (say, Laptops) or if the browser window is minimized. I was doing some research and found that I could probably change the coords to percentage and then set img as 100%; however, that will be a lot of manual work. Alternatively, the window resize event to scale the image with transform: scale(...) property in order to keep the coord positions could work, but, I quite new to JS, so it will be a tricky one for me to figure out.
Copy linkTweet thisAlerts:
@SempervivumAug 13.2019 — Yes, that's a disadvante of a simple image map. However one can replace the map by an SVG image which is responsive and which supports all kinds of shapes.
however, that will be a lot of manual work. [/quote]Does that mean that you have image maps with a lot of shapes already? If so you might automate the manual work by PHP.
Copy linkTweet thisAlerts:
@ashbyauthorAug 13.2019 — @Sempervivum#1607529 I use a webdev tool that's pretty limited in functionality, so most I can add is JS. I can only use image maps, as it comes with the tool. Using SVG would be more work.
Copy linkTweet thisAlerts:
@SempervivumAug 13.2019 — most I can add is JS[/quote]
Then I recommend to use JS and adjust the coordinates based on the size of the image. This code does it:
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("area[title]").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

<i> </i> $('img[usemap]').rwdImageMaps();
<i> </i> $(window).resize(function (e) {
<i> </i> //$('img[usemap]').maphilight();
<i> </i> }).resize();

<i> </i> // start adjusting coordinates
<i> </i> var theimg = document.querySelector('img[usemap]');
<i> </i> // provide the natural width of the image
<i> </i> var natWidth = theimg.naturalWidth;
<i> </i> // save the original coords of each area in a data attribute
<i> </i> $('#foodmap area').each(function (idx, item) {
<i> </i> $(item).data('coords-orig', $(item).attr('coords'));
<i> </i> });
<i> </i> function adjustMap() {
<i> </i> // provide current width of the image
<i> </i> var w = theimg.offsetWidth;
<i> </i> // provide factor
<i> </i> var factor = w / natWidth;
<i> </i> console.log(factor);
<i> </i> // for each area of the image map
<i> </i> $('#foodmap area').each(function (idx, item) {
<i> </i> // fetch original coords from data attribute
<i> </i> var coords = $(item).data('coords-orig').split(',');
<i> </i> // adjust original coords by multiplying by factor
<i> </i> coords = coords.map(function (item) {
<i> </i> return item * factor;
<i> </i> });
<i> </i> console.log(coords);
<i> </i> // update coords by the new ones
<i> </i> $(item).attr('coords', coords.join(','));
<i> </i> });
<i> </i> }
<i> </i> var natWidth = theimg.naturalWidth;
<i> </i> $(window).resize(adjustMap);
<i> </i> adjustMap();
×

Success!

Help @ashby spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...