CODEWITHSUNDEEP
javascriptjquerycsshtml
The Quantum Physicist
The Quantum Physicist

Reputation: 26326

Using HTML5 tooltip gets page ruined on Google Chrome

So I wrote this page from scratch, using php, python and bash. The page collects data from the server, and displays it.

I would like to add tooltips on the world map, such that the user could see the station name on click/mouseover. I followed this tutorial.

1- I wrapped my world image with #wrapper

2- I added the CSS code

3- I added the Javascript code.

This appeared to look fine in the beginning and the tooltip is working, but on Google Chrome, like 90% of the time (I'm on Windows 10 viewing this) I suddenly see that the world map gets messed up, as follows, getting over the data plots:

enter image description here

While it should look like this:

enter image description here

I noticed that this problem happens in Google Chrome, and not on Mozilla Firefox or Microsoft Edge... Why is this happening? I have the feeling that a simple float command could fix it. Could you please help me with this? Why is this happening?

If you require any additional information please ask.

UPDATE:

I noticed removing this part of the script solves the problem:

    $('#wrapper').css({'width':$('#wrapper img').width(),
                  'height':$('#wrapper img').height()
})

But then the tooltip doesn't work.

Upvotes: 0

Views: 185

Answers (2)

Andrey
Andrey

Reputation: 4050

You have your rome.js included in head section. If it will be loaded earlier then html body, it will be executed earlier then dom content loaded. So the first time evertything works, because js is loading with dom content. After first refresh js will be taken from cache and executed too early.

So you should prevent that using jquery $(document).ready() method or DOMContentLoaded event.

Or you could simply include your rome.js in the end of the body section.

Upvotes: 1

chrona
chrona

Reputation: 1911

There are two things not working out here:

  1. You don't have a doctype.
  2. You have some <style> and <script> tags before your <html>. They should be inside your <head> or <body>

Upvotes: 0

Related Questions