Karte Onmouseover mit Daten-Toggle-Tooltip

Question

Dies ist eine Fortsetzung dieser Frage

Image with a link in a specific point

ich die Eigenschaft Onmouseover gefunden habe und ich dachte wirklich interessant, die Tatsache, dass es eine Funktion mit ihm auslösen.

Also gut, ich muss eine Tooltip genau auf der Oberseite des Kartenbereichs zeigen, die ich die Onmouseover-Eigenschaft zugeschrieben.

Gibt es eine Möglichkeit, das kann ich tun? Ich habe versucht, es zu tun, aber ich konnte es nicht auf dem Gebiet zeigen, getrennt nur

das ist, was ich versucht:

<area id="test" data-toggle="tooltip" data-placement="left" title="Tooltip on left" shape="rect" href="" onmouseover='' onmouseout='' coords="750,435,540,300"> 

Answer 1

Verwenden Sie Ihre Karte als background-image:

#mapcontainer { background-image: url('path/to/map.png'); } 

Dann richten gerade die TextArea- oder Eingabe innerhalb des gleichen Behälters:

#mapcontainer input[type="text"] { margin-left: 100px; margin-top: 100px; /*change as necessary*/ } 

Ein Hintergrundbild verhindert, dass Sie dem Textfeld eine Kombination aus absoluter Position und Z-Index hinzufügen müssen.

Answer 2

CSS positioning erreichen Sie das Layout, das Sie suchen.

Ich würde auch vorschlagen, dass Sie ein Element verwenden, das keine Eingabe oder Textarea ist. Verwenden Sie etwas wie ein Div, um es semantisch zu machen.