Extending an SVG tooltip's hover zone out of its parent element's bounds
I have a chart SVG that contains some elements that have tooltips attached. The tooltips are HTML embedded using foreignObject and are supposed to be shown when hovering on those elements. I gave the SVG overflow: visible to make sure tooltips could be fully displayed.
This works fine, but the problem is that as soon as the cursor leaves the bounds of the outer SVG, the tooltip disappears:
(The SVG ends just below the bottom axis)
Is there a way to "extend" the hover zone to include any element that sticks out of the SVG like this?
html css svg
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
add a comment |
I have a chart SVG that contains some elements that have tooltips attached. The tooltips are HTML embedded using foreignObject and are supposed to be shown when hovering on those elements. I gave the SVG overflow: visible to make sure tooltips could be fully displayed.
This works fine, but the problem is that as soon as the cursor leaves the bounds of the outer SVG, the tooltip disappears:
(The SVG ends just below the bottom axis)
Is there a way to "extend" the hover zone to include any element that sticks out of the SVG like this?
html css svg
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
2
Don't useoverflow:visible. Make the tooltip a html element outside the SVGposition: absoluteand use the SVG object position for thetopandleft. Please show your code to get a real solution.
– enxaneta
Nov 13 '18 at 7:18
The problem is that it becomes very hard to position the tooltips correctly if they're not children of the hover elements.
– Sacha
Nov 15 '18 at 9:17
It's not very hard to position the tooltips correctly if they're not children of the hover. Please show some code. A minimal example would do.
– enxaneta
Nov 15 '18 at 9:25
add a comment |
I have a chart SVG that contains some elements that have tooltips attached. The tooltips are HTML embedded using foreignObject and are supposed to be shown when hovering on those elements. I gave the SVG overflow: visible to make sure tooltips could be fully displayed.
This works fine, but the problem is that as soon as the cursor leaves the bounds of the outer SVG, the tooltip disappears:
(The SVG ends just below the bottom axis)
Is there a way to "extend" the hover zone to include any element that sticks out of the SVG like this?
html css svg
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
I have a chart SVG that contains some elements that have tooltips attached. The tooltips are HTML embedded using foreignObject and are supposed to be shown when hovering on those elements. I gave the SVG overflow: visible to make sure tooltips could be fully displayed.
This works fine, but the problem is that as soon as the cursor leaves the bounds of the outer SVG, the tooltip disappears:
(The SVG ends just below the bottom axis)
Is there a way to "extend" the hover zone to include any element that sticks out of the SVG like this?
html css svg
html css svg
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
asked Nov 13 '18 at 5:47
SachaSacha
1,19411535
1,19411535
2
Don't useoverflow:visible. Make the tooltip a html element outside the SVGposition: absoluteand use the SVG object position for thetopandleft. Please show your code to get a real solution.
– enxaneta
Nov 13 '18 at 7:18
The problem is that it becomes very hard to position the tooltips correctly if they're not children of the hover elements.
– Sacha
Nov 15 '18 at 9:17
It's not very hard to position the tooltips correctly if they're not children of the hover. Please show some code. A minimal example would do.
– enxaneta
Nov 15 '18 at 9:25
add a comment |
2
Don't useoverflow:visible. Make the tooltip a html element outside the SVGposition: absoluteand use the SVG object position for thetopandleft. Please show your code to get a real solution.
– enxaneta
Nov 13 '18 at 7:18
The problem is that it becomes very hard to position the tooltips correctly if they're not children of the hover elements.
– Sacha
Nov 15 '18 at 9:17
It's not very hard to position the tooltips correctly if they're not children of the hover. Please show some code. A minimal example would do.
– enxaneta
Nov 15 '18 at 9:25
2
2
Don't use
overflow:visible. Make the tooltip a html element outside the SVG position: absolute and use the SVG object position for the top and left. Please show your code to get a real solution.– enxaneta
Nov 13 '18 at 7:18
Don't use
overflow:visible. Make the tooltip a html element outside the SVG position: absolute and use the SVG object position for the top and left. Please show your code to get a real solution.– enxaneta
Nov 13 '18 at 7:18
The problem is that it becomes very hard to position the tooltips correctly if they're not children of the hover elements.
– Sacha
Nov 15 '18 at 9:17
The problem is that it becomes very hard to position the tooltips correctly if they're not children of the hover elements.
– Sacha
Nov 15 '18 at 9:17
It's not very hard to position the tooltips correctly if they're not children of the hover. Please show some code. A minimal example would do.
– enxaneta
Nov 15 '18 at 9:25
It's not very hard to position the tooltips correctly if they're not children of the hover. Please show some code. A minimal example would do.
– enxaneta
Nov 15 '18 at 9:25
add a comment |
2 Answers
2
active
oldest
votes
One solution I was given was to give the SVG a large 100px transparent border-bottom and background-clip: padding-box (although in my case that second part wasn't even necessary).
It's not perfect because it relies on a fixed border width and will break if a tooltip is taller than that, but it does extend the hover zone so it's one option.
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
add a comment |
This is an example of how to an element outside the SVG as a tool tip:
let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274575%2fextending-an-svg-tooltips-hover-zone-out-of-its-parent-elements-bounds%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
One solution I was given was to give the SVG a large 100px transparent border-bottom and background-clip: padding-box (although in my case that second part wasn't even necessary).
It's not perfect because it relies on a fixed border width and will break if a tooltip is taller than that, but it does extend the hover zone so it's one option.
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
add a comment |
One solution I was given was to give the SVG a large 100px transparent border-bottom and background-clip: padding-box (although in my case that second part wasn't even necessary).
It's not perfect because it relies on a fixed border width and will break if a tooltip is taller than that, but it does extend the hover zone so it's one option.
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
add a comment |
One solution I was given was to give the SVG a large 100px transparent border-bottom and background-clip: padding-box (although in my case that second part wasn't even necessary).
It's not perfect because it relies on a fixed border width and will break if a tooltip is taller than that, but it does extend the hover zone so it's one option.
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
One solution I was given was to give the SVG a large 100px transparent border-bottom and background-clip: padding-box (although in my case that second part wasn't even necessary).
It's not perfect because it relies on a fixed border width and will break if a tooltip is taller than that, but it does extend the hover zone so it's one option.
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
answered Nov 13 '18 at 6:09
SachaSacha
1,19411535
1,19411535
add a comment |
add a comment |
This is an example of how to an element outside the SVG as a tool tip:
let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
add a comment |
This is an example of how to an element outside the SVG as a tool tip:
let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
add a comment |
This is an example of how to an element outside the SVG as a tool tip:
let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
This is an example of how to an element outside the SVG as a tool tip:
let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>let mouse = ;
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e =>
tooltip.innerHTML = "";
if (e.target.tagName == "circle")
mouse = oMousePos(svg, e);
tooltip.innerHTML = e.target.id;
tooltip.style.left = mouse.x + "px";
tooltip.style.top = mouse.y + "px";
);
function oMousePos(svg, evt)
var ClientRect = svg.getBoundingClientRect();
return
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
;
svgborder:1px solid;
circlefill:gold;
#tooltipposition:absolute;padding:1em; <article>
<svg id="svg" viewBox="0 0 100 50">
<circle id="c1" cx="56" cy="17" r="15" />
<circle id="c2" cx="23" cy="34" r="7" />
</svg>
<div id="tooltip"></div>
</article>answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
answered Nov 15 '18 at 16:07
enxanetaenxaneta
6,2242416
6,2242416
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
add a comment |
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
Thanks but I'm doing this in React and there's various constraints that make it hard to take out the tooltips. If it turns out I have to take them out I'll find a way, but for now it's not really what I'm trying to do.
– Sacha
Nov 16 '18 at 11:30
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274575%2fextending-an-svg-tooltips-hover-zone-out-of-its-parent-elements-bounds%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Don't use
overflow:visible. Make the tooltip a html element outside the SVGposition: absoluteand use the SVG object position for thetopandleft. Please show your code to get a real solution.– enxaneta
Nov 13 '18 at 7:18
The problem is that it becomes very hard to position the tooltips correctly if they're not children of the hover elements.
– Sacha
Nov 15 '18 at 9:17
It's not very hard to position the tooltips correctly if they're not children of the hover. Please show some code. A minimal example would do.
– enxaneta
Nov 15 '18 at 9:25