SVG in HTML, tooltip not displayed on mouseover</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2015-03-07T16:46:02.040" class="fromnow">Mar 07 '15 at 16:46</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-03-11T14:20:33.697" datetime="2020-03-11T14:20:33.697">Mar 11 '20 at 14:20</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,523 times"> <span class="fc-light mr2">Viewed</span> 1,523 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="28917294" data-ownerid="1663651" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="28917294"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have a SVG image, that contains <title> elements which are used as tooltips. When I load the SVG in Mozilla, the tooltips display correctly.</p> <p>However, when I use the SVG in an HTML document, via the <img> element the tooltips are not displayed on mouseover.</p> <p>Is it possible to get the tooltips to display correctly?</p> <p>The HTML is</p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>SVG in HTML title test</title> </head> <body> <img src="test.svg" /> </body> </html> </code></pre> <p>and the SVG is</p> <pre><code><?xml version="1.0" encoding="iso-8859-1" standalone="yes"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100"> <title>SVG in HTML test</title> <g> <polygon stroke="black" stroke-width="1" fill="#0000ff" points="20,20 40,20 40,40 20,40" /> <title>rectangle</title> </g> <g> <circle stroke="black" stroke-width="1" fill="#ff0000" cx="70" cy="70" r="10" /> <title>circle</title> </g> </svg> </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/svg" class="post-tag js-gps-track" title="show questions tagged 'svg'" rel="tag">svg</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 07 '15 at 16:46">asked Mar 07 '15 at 16:46</time> <a href="../../users/1663651/csm" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1663651.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="CSM" /> </a> <div class="s-user-card--info"> <a href="../../users/1663651/csm" class="s-user-card--link">CSM</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,232</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badge">8</li> <li class="s-award-bling s-award-blingbronze" title="12 bronze badge">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-28917294" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="28917294" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-69600594" class="comment js-comment " data-comment-id="69600594" data-comment-owner-id="1038015" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment69600594_28917294"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Images (<img/> elements etc) are not interactive so title elements within them are non-functional.</span> – <a href="../../users/1038015/robert-longson" title="118,664 reputation" class="comment-user ">Robert Longson</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/28917294/svg-img-in-html-title-tooltip-not-displayed-on-mouseover#comment69600594_28917294"><span title="2016-12-17T16:27:37.060 License: CC BY-SA 3.0" class="relativetime-clean">Dec 17 '16 at 16:27</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="28917577"></a> <div id="answer-28917577" class="answer accepted-answer" data-answerid="28917577" data-ownerid="2519566" data-score="0" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="28917577"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You could try using the <code>object</code> tag but this might not work for all browsers, I think it only works for the ones which support <code>HTML5</code>:</p> <pre><code><object type="image/svg+xml" data="test.svg">Browser doesn't support SVG</object> </code></pre> <p>Alternatively, I'm not a big fan of this but what you can try is also using an <code>iframe</code>:</p> <pre><code><iframe src="test.svg"></iframe> </code></pre> <p>This should also work for older browsers... both approaches should show the <code>tooltips</code> defined by your <code>title</code> tags. I did a quick (successful) test with yours.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 07 '15 at 17:10">answered Mar 07 '15 at 17:10</time> <a href="../../users/2519566/avinor" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2519566.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Avinor" /> </a> <div class="s-user-card--info"> <a href="../../users/2519566/avinor" class="s-user-card--link">Avinor</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">846</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badge">8</li> <li class="s-award-bling s-award-bling__bronze" title="19 bronze badge">19</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-28917577" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="28917577" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-46093328" class="comment js-comment " data-comment-id="46093328" data-comment-owner-id="1663651" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment46093328_28917577"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks, I'll try putting an iframe inside the object, so that newer browsers will use the object element, and older ones the iframe.</span> – <a href="../../users/1663651/csm" title="1,232 reputation" class="comment-user owner">CSM</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/28917294/svg-img-in-html-title-tooltip-not-displayed-on-mouseover#comment46093328_28917577"><span title="2015-03-07T17:33:53.880 License: CC BY-SA 3.0" class="relativetime-clean">Mar 07 '15 at 17:33</span></a></span> </div> </div> </li> <li id="comment-46093572" class="comment js-comment " data-comment-id="46093572" data-comment-owner-id="2519566" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment46093572_28917577"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Glad if I could help. Does it now work the way you need it? If this solved your problem I would kindly ask you to accept my answer. Otherwise, please let us know if there is still an issue with the tooltips. Also, as a fallback to the `iframe`, you can still make use of the `image` (without tooltips) - for the worst case. At least using these `tags` does not require using any `javascript` libraries.</span> – <a href="../../users/2519566/avinor" title="846 reputation" class="comment-user ">Avinor</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/28917294/svg-img-in-html-title-tooltip-not-displayed-on-mouseover#comment46093572_28917577"><span title="2015-03-07T17:45:34.097 License: CC BY-SA 3.0" class="relativetime-clean">Mar 07 '15 at 17:45</span></a></span> </div> </div> </li> <li id="comment-46093943" class="comment js-comment " data-comment-id="46093943" data-comment-owner-id="1663651" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment46093943_28917577"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks, it's working for the complex SVG that prompted the question. A fall-back past the <iframe> is probably a bit of overkill, but I'll do it anyway.</iframe></span> – <a href="../../users/1663651/csm" title="1,232 reputation" class="comment-user owner">CSM</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/28917294/svg-img-in-html-title-tooltip-not-displayed-on-mouseover#comment46093943_28917577"><span title="2015-03-07T18:03:51.337 License: CC BY-SA 3.0" class="relativetime-clean">Mar 07 '15 at 18:03</span></a></span> </div> </div> </li> <li id="comment-46094009" class="comment js-comment " data-comment-id="46094009" data-comment-owner-id="2519566" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment46094009_28917577"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I agree, just wanted to mention it. It will be very unlikely that you have a `real` visitor who has a browser which does not support iframes. However, some browsers might block mixed content. But depends on your audience too I'd say. ;-)</span> – <a href="../../users/2519566/avinor" title="846 reputation" class="comment-user ">Avinor</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/28917294/svg-img-in-html-title-tooltip-not-displayed-on-mouseover#comment46094009_28917577"><span title="2015-03-07T18:07:00.430 License: CC BY-SA 3.0" class="relativetime-clean">Mar 07 '15 at 18:07</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="60638216"></a> <div id="answer-60638216" class="answer " data-answerid="60638216" data-ownerid="3598633" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="60638216"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Add the appropriate ID’s to the <code><title></code>:</p> <p><code><title id="uniqueTitleID">SVG in HTML title test</title></code></p> <p>On the <code><svg></code> tag, add:</p> <p><code>aria-labelledby="uniqueTitleID"</code> (use the title ID) </p> <p>title should be included in aria-labelledby because it has better screen-reader support than aria-describedby</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 11 '20 at 14:20">answered Mar 11 '20 at 14:20</time> <a href="../../users/3598633/surinder" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3598633.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Surinder" /> </a> <div class="s-user-card--info"> <a href="../../users/3598633/surinder" class="s-user-card--link">Surinder</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">415</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="4 silver badge">4</li> <li class="s-award-bling s-award-bling__bronze" title="16 bronze badge">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-60638216" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="60638216" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-111814988" class="comment js-comment " data-comment-id="111814988" data-comment-owner-id="4892206" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment111814988_60638216"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This solution is even recommended by Mozillas Developer Network: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img</span> – <a href="../../users/4892206/michael-w-czechowski" title="3,366 reputation" class="comment-user ">Michael W. Czechowski</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/28917294/svg-img-in-html-title-tooltip-not-displayed-on-mouseover#comment111814988_60638216"><span title="2020-08-03T16:16:46.057 License: CC BY-SA 4.0" class="relativetime-clean">Aug 03 '20 at 16:16</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/75656569/css-or-other-antora-asciidoc-options-to-display-svg-tooltips-form-html-files" class="question-hyperlink">css or other antora / asciidoc options to display svg tooltips form html files</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>