Tooltip over SVG
In the svg file, each layer is specified by naming its class (class='class_name').
Outside the svg, there are hidden layers that relate to those of the svg with the same layer name as id (id='class_name').
When hover the layers are shown following the movement of the mouse pointer.
It uses a javascript script, without any libraries, to show and hide layers of information and to track the mouse.
Example on the map of the "Vegueries of Catalonia".
Outside the svg, there are hidden layers that relate to those of the svg with the same layer name as id (id='class_name').
When hover the layers are shown following the movement of the mouse pointer.
It uses a javascript script, without any libraries, to show and hide layers of information and to track the mouse.
Example on the map of the "Vegueries of Catalonia".
Download
tooltip_svg.zip [ca]
44 kb
44 kb
The SVG map design and the javascript code to show the Tooltips, are originals from BinariEM.
You are free to use it for any purpose, as long as you cite the authorship and source.
Created by arnAu bellavista; original code from BinariEM.
You are free to use it for any purpose, as long as you cite the authorship and source.
Created by arnAu bellavista; original code from BinariEM.
Alt Pirineu i Aran
· Sort
· Sort
Girona
· Girona
· Girona
Central
· Manresa
· Manresa
Ponent
· Lleida
· Lleida
Barcelona
· Barcelona
· Barcelona
Camp de Tarragona
· Tarragona
· Tarragona
Terres de l'Ebre
· Amposta
· Amposta