Good day. I am creating an interactive map and I wanted a pop-up box to appear with text information whenever a mouse either hovers over or clicks on an Object. I have tried playing with the Obect Attributes tab, but I have had no luck. Can someone explain the process, assuming it exists? The online manual was if little use. I am running the latest version of Inkscape.
The simplest way is to edit the title entry in object properties.
Then click 'set'
This is the same in operation as the HTML <title> tag. It will create a tool tip popup just like in HTML. The browser determines how it will render.
In order to enter a line break in the text, after creating in the title go into the XML editor (Edit>Xml Editor) click the title in question and edit the text in the panel that appears
----------------
Or add a css tooltip
Create a 2nd style tag with a custom id ( do not edit any existing inkscape style tags )
and insert standard css hover tool tip code.
https://www.w3schools.com/css/css_tooltip.asp
Then if you make a group.
in the XML Editor ( Edit>Xml Editor )
On the group add 'class tooltip'
and on any elements contained in the group you can add 'class tooltiptext'
this does not require any javascript, just pure css.
---------------
Use javascript.
Write a toggle visibility function in a <script> tag.
Then add the name of the function in the 'onmouseover' property of the object properties panel.
----------------
I've attached an example of the first two.
Please note that in SVG if you have a very thin stroke then it can be difficult for the user to do mouseover. I work around this by adding a fill and setting the opactity of 1% for that fill ( alpha slider in fill properties *not* object opacity)
Menu: Extensions>Web>Javascript>Set Attributes seems to work well enough.
The SVG file can be downloaded, then opened in a browser to test. (It will not behave properly when opened in the forum preview.)
Note that I have copied the code generated by the extension from the onmouseover property into the onmouseout property, then changed the onmouseout code for opacity to zero. That will hide the popup when the mouse is moved off the target object.
Thanks guys. I would be lying if I said I understood most of what you said. Is there any way to get information in the "Description" text box in the Object Attributes field to display anywhere?
Beginners' Questions Creating Pop-up boxes for n interactive map
Inkscape.org
Good day. I am creating an interactive map and I wanted a pop-up box to appear with text information whenever a mouse either hovers over or clicks on an Object. I have tried playing with the Obect Attributes tab, but I have had no luck. Can someone explain the process, assuming it exists? The online manual was if little use. I am running the latest version of Inkscape.
The simplest way is to edit the title entry in object properties.
Then click 'set'
This is the same in operation as the HTML <title> tag. It will create a tool tip popup just like in HTML. The browser determines how it will render.
In order to enter a line break in the text, after creating in the title go into the XML editor (Edit>Xml Editor) click the title in question and edit the text in the panel that appears
----------------
Or add a css tooltip
Create a 2nd style tag with a custom id ( do not edit any existing inkscape style tags )
and insert standard css hover tool tip code.
https://www.w3schools.com/css/css_tooltip.asp
Then if you make a group.
in the XML Editor ( Edit>Xml Editor )
On the group add 'class tooltip'
and on any elements contained in the group you can add 'class tooltiptext'
this does not require any javascript, just pure css.
---------------
Use javascript.
Write a toggle visibility function in a <script> tag.
Then add the name of the function in the 'onmouseover' property of the object properties panel.
----------------
I've attached an example of the first two.
Please note that in SVG if you have a very thin stroke then it can be difficult for the user to do mouseover. I work around this by adding a fill and setting the opactity of 1% for that fill ( alpha slider in fill properties *not* object opacity)
Menu: Extensions>Web>Javascript>Set Attributes seems to work well enough.
The SVG file can be downloaded, then opened in a browser to test. (It will not behave properly when opened in the forum preview.)
Note that I have copied the code generated by the extension from the onmouseover property into the onmouseout property, then changed the onmouseout code for opacity to zero. That will hide the popup when the mouse is moved off the target object.
Thanks guys. I would be lying if I said I understood most of what you said. Is there any way to get information in the "Description" text box in the Object Attributes field to display anywhere?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc