Tooltip in SVG path isn't working while it works in plain htmlHow can I use a carriage return in a HTML tooltip?Resizing SVG in html?jquery's append not working with svg element?Fill SVG path element with a background-imageHow to calculate the SVG Path for an arc (of a circle)Can I change the fill color of an svg path with CSS?make an html svg object also a clickable linkClip-path using svg html element is not workingHTML Tooltip On Mouse Over SVG PathHTML, SVG - Clip path of external SVG not working
Geometric programming: Why are the constraints defined to be less than/equal to 1?
Improving software when the author can see no need for improvement
Can a College of Swords bard use Blade Flourishes multiple times in a turn?
What happen if I gain the control of aura that enchants an opponent's creature? Would the aura stay attached?
How can I read one message at a time from /var/mail
English - Acceptable use of parentheses in an author's name
A stranger from Norway wants to have money delivered to me
Is there a loss of quality when converting RGB to HEX?
A question about 'reptile and volatiles' to describe creatures
How many hit points does the Battle Smith Artificer's Iron Defender have?
Write an interpreter for *
How to precisely measure small charges?
How would I as a DM create a smart phone-like spell/device my players could use?
Team goes to lunch frequently, I do intermittent fasting but still want to socialize
Is this cheap "air conditioner" able to cool a room?
Look mom! I made my own (Base 10) numeral system!
Dropdowns & Chevrons for Right to Left languages
What is the idiomatic way of saying “he is ticklish under armpits”?
Word or idiom defining something barely functional
How do I explain to a team that the project they will work on for six months will 100% fail?
Acceptable to cut steak before searing?
How can you evade tax by getting employment income just in equity, then using this equity as collateral to take out loan?
Improve survivability of bicycle container
How to identify the wires on the dimmer to convert it to Conventional on/off switch
Tooltip in SVG path isn't working while it works in plain html
How can I use a carriage return in a HTML tooltip?Resizing SVG in html?jquery's append not working with svg element?Fill SVG path element with a background-imageHow to calculate the SVG Path for an arc (of a circle)Can I change the fill color of an svg path with CSS?make an html svg object also a clickable linkClip-path using svg html element is not workingHTML Tooltip On Mouse Over SVG PathHTML, SVG - Clip path of external SVG not working
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
3
I have this very simple CSS/HTML code that works on plain HTML and shown as an example at the end of the demo too. However, it fails to work in SVG.
When inspecting the element, the :after code is called but the tooltip can't be seen. Any idea where am I going wrong?
JSFiddle Demo
.land
fill: rgba(255,210,0,0.6);
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
.land:hover
fill:rgb(255,210,0);
.byrne
display: inline;
position: relative;
.byrne:hover:after
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-90 280 1040 870">
<defs>
<amcharts:ammap projection="mercator" leftlongitude="68.183544" toplatitude="37.053723" rightlongitude="97.419080" bottomlatitude="6.751085"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--id:"IN-AN",id:"IN-AP",id:"IN-AR",id:"IN-AS",id:"IN-BR",id:"IN-CH",id:"IN-CT",id:"IN-DD",id:"IN-DL",id:"IN-DN",id:"IN-GA",id:"IN-GJ",id:"IN-HP",id:"IN-HR",id:"IN-JH",id:"IN-JK",id:"IN-KA",id:"IN-KL",id:"IN-LD",id:"IN-MH",id:"IN-ML",id:"IN-MN",id:"IN-MP",id:"IN-MZ",id:"IN-NL",id:"IN-OR",id:"IN-PB",id:"IN-PY",id:"IN-RJ",id:"IN-SK",id:"IN-TG",id:"IN-TN",id:"IN-TR",id:"IN-UP",id:"IN-UT",id:"IN-WB"-->
</defs>
<g>
<a title="This is some information for our tooltip." class="byrne">
<path id="Andhra Pradesh - 37 units" title="Andhra Pradesh" class="land" stroke="#FFFFFF" stroke-width="0.5" d="M374.37,881.072l-0.003,0.009l0,0L374.37,881.072z M375.185,881.023
l-0.485,3.09l-0.941-1.338l-0.021-0.997L375.185,881.023z M374.37,881.072l-0.152-0.778l-0.34,0.55l-1.578,0.121l-0.072-0.907
l-1.126,0.721l2.171,0.952l0,0l-0.028,1.288l0.567,0.174l0.828,1.861l-9.559,4.679l-5.865,2.304l-4.694-1.326l-3.882,0.459
l-3.336,1.656l-3.249,7.113l0.124,1.203l-3.635,3.846l-0.342,0.577l0.48,1.08l-1.186,1.037l-3.787,0.51l-1.083-1.825l0.327-0.966
l0.466,0.007l-0.146-0.72l-3.103-1.083l-3.91,0.753l-2.784,1.329l-2.392,1.574l-1.824,2.035l-1.81,5.579l-2.653,4.202
l-1.344,6.258l1.744,9.312l2.203,3.861l-1.811,12.51l3.009,8.091l-0.217,4.812l2.063,5.512l-3.772-6.844l-0.705-0.319l-0.146,2.37
l-0.771-0.772l0.443-0.765l-0.501-0.097l-1.462,2.297l2.895,2.636l1.961,0.045l1.977,1.75l0,0l0.001,1.418l-0.945-0.527
l-1.194-2.346l-2.048-0.054l-2.162-1.571l-1.972,0.214l-0.104,0.522l1.113,0.222l0.087,0.464l-0.789-0.088l-0.275,0.756
l-0.877,0.219l0.036,0.893l-0.805,0.362l0.551,0.808l-0.733,1.02l-1.945,0.868l-1.331-0.023l-0.536,0.595l-0.673-0.554
l-0.858,0.816l1.665,1.303l-1.061,0.763l-0.563-0.719l-0.893,0.386l0.191-0.707l-0.595,0.118l-0.125-1.401l-2.311,0.977
l-0.825-0.581l-0.339-1.174l-2.797-0.335l-1.42,0.549l1.319,0.58l-0.371,1.849l0.661-0.473l0.247,0.349l-0.625,0.22l0.056,0.562
l-1.989,0.651l0.178,0.889l-1.22,0.877l-1.061-1.183l-1.284,0.151l-0.001,0.845l-0.769,0.515l-0.948,2.064l-2.188-0.183
l-2.341-1.664l-1.707,0.233l-0.547,0.872l0.816,0.439l-1.119-0.028l-0.154-1.774l-3.403,1.089l-1.14-0.286l-0.228,1.381
l-1.116-0.36l-0.98,1.041l0.864,1.596l-0.549-0.005l-1.145,3.958l-0.953,0.716l0.055,1.555l-0.609,0.158l-0.22-0.637l0,0l0,0l0,0
l-0.142,0.046l-0.448-0.045l-0.127,1.07l-0.809,0.027l0.051,1.195l-2.389,0.148l-2.037-1.095l-0.682-1.037l-1.951,0.281
l0.978-0.903l-0.171-0.997l0,0l0.535-2.527l1.623,0.006l1.107-2.158l0.861,0.877l1.504-0.146l-0.344-1.812l0.922,0.143
l-0.167-1.821l1.388-0.566l-0.07-0.771l0.681-0.419l-0.502-0.595l1.579-0.985l-0.736-0.82l0.727-0.453l0.23-1.544l-0.571-0.999
l-0.912,1.172l-1.284-1.397l-0.936,0.255l-0.301-0.554l-0.869,0.411l-0.635-0.438l0.795-0.329l-1.105-0.607l0.933-5.962
l-4.268-0.243l-1.162,0.824l0.28-1.599l-0.875-0.194l-0.125-0.676l-1.962,0.357l-0.586-0.848l0.15-0.567l1.082,0.102l0.105-0.691
l-0.64-0.623l0.872-1.163l-0.123-1.712l-1.895-1.228l-0.088,0.908l-1.377-0.235l-0.507,1.111l-0.555,0.006l-0.055-1.614
l0.931-0.352l-0.304-1.532l-1.435,1.429l-0.644-0.91l-1.797-0.099l-0.312,0.703l0.559,1.286l-1.353,0.661l0.063,0.617
l-1.717,0.599l-0.108,1.545l-0.345-0.768l-0.833,0.245l0.17-0.677l-0.552,0.045l-1.011,0.547l0.688,0.541l-0.405,0.21
l-0.671-0.434l-1.035,0.726l-0.953-0.733l-0.192,1.558l-0.653-0.565l-0.115,0.726l-0.869,0.104l0.201-3.246l-1.276-0.059
l0.415-0.961l-1.703-0.283l-1.032,0.534l-0.343-0.844l-1.478,0.477l-0.435-1.485l-0.583,0.897l-0.172-0.528l-0.684,0.571
l-0.046-1.543l-0.551,0.472l0.171,1.147l-1.011,0.203l1.004,0.768l0.114,1.768l-1.866-0.166l-0.921,0.59l-0.882-0.872
l-0.391,1.036l-0.494-0.263l-0.632-1.923l1.279-2.114l0.627-0.109l-0.143-0.755l-2.741-2.603l1.149-1.14l-1.256-1.661
l-1.134-0.103l0.203-0.75l1.192-0.186l0.123-0.627l2.046,0.443l-0.301,2.001l0.402,1.203l2.549,0.297l0.686,1.355l4.348-0.89
l1.054,1.137l-0.143,2.299l1.102-0.029l0.037,0.478l0.93-0.787l-0.516-0.72l0.6-0.875l-1.438-0.01l0.203-1.023l-1.497-0.418
l1.812-2.159l-0.15-0.404l-1.183,0.604l0.084-0.759l0.757-0.14l0.34-0.958l2.896,0.384l-0.109-3.24l-1.087-0.011l-0.324-1.009
l-1.484-0.406l-0.278,0.798l1.065,2.233l-0.835,0.54l-0.742-1.025l0.101-1.054l-2.083-0.183l0.041-1.478l-1.288,0.539
l-2.087-0.716l-1.052,1.349l-0.179,1.992l-0.779,0.105l-0.673-0.811l-2.925-0.015l-0.339-0.86l0.66-0.586l-1.857-1.406
l0.105-1.177l0.784-0.625l0.745,0.377l0.058-1.224l0.775-0.892l-2.7,0.264l-1.116-1.468l-0.729-0.125l-1.035-1.996l0.991-3.564
l-0.464-1.201l1.79-0.665l0.411-4.306l-0.956,0.351l-1.678-0.508l0.544-1.259l-0.27-1.474l0.594-0.522l2.087,1.673l2.75,0.493
l0.494-0.518l1.209,0.01l-0.154,0.641l0.99,0.146l1.967-3.246l-0.574-0.598l0.67-0.169l0.013-1.209l-0.975-0.738l1.132-1.021
l-0.425-0.716l-0.85-0.112l-0.15-1.011l-1.259,0.146l-0.894-3.057l-1.491-1.503l0.04-0.417l1.431,0.172l0.07-3.612l1.365-0.515
l0.91,0.75l0.23-0.916l-2.139-2.037l0.542-2.396l-1.089-0.233l1.144-1.826l2.028-1.118l2.76-0.464l6.817,0.999l0,0l2.537,0.246
l1.376,0.953l1.496-0.272l2.174,0.574l2.316-0.827l2.987,0.993l0.9-1.159l0.716,1.555l1.202,0.47l0.425-0.588l1.016-0.002
l0.401-1.391l1.516-0.774l0.489-2.765l1.559,0.059l2.341-1.402l4.015,0.665l1.515-1.151l2.529,1.955l1.606,0.081l1.609-1.726
l0.035-1.878l0.656,0.099l0.255,1.162l0.99,0.134l-0.131-2.076l0.525-0.552l2.759-1.176l3.811,0.775l1.102-0.608l0.172-7.28
l1.067-1.445l4.199-0.569l1.847-1.303l3.948-0.856l3.318-1.834l0.925,1.062l1.351-0.21l1.052,1.64l1.468-0.114l2.349-2.799
l0.57-1.859l-0.958-1.056l-1.083-0.293l0.469-1.196l0.95-1.578l2.302-0.545l1.263-1.622l0.5,0.865l1.594,0.069l1.025,1.487
l0.467,2.309l1.031,0.437l0.375,1.191l0.7-1.051l1.384,0.936l0.1,0.688l2.785,0.737l1.08-0.677l-1.296-1.006l0.272-1.202
l0.57-0.133l-0.068-1.43l-2.43-0.591l-0.091,0.837l-3.391-1.446l0.798-1.18l-0.568-1.156l0.734-0.571l0.666,1.434l0.673,0.212
l0.941-0.904l0.363-1.567l1.677-0.82l2.524,1.368l-0.446,0.888l2.254-0.257l2.793,1.059l0.689-0.686l0.301-2.598l1.125,0.011
l-0.209-1.505l2.247,0.587l1.446-0.929l3.043-0.51l0.491-2.442l2.24,0.062l1.505-1.924l1.232,0.911l1.146-0.121l2.034-2.377
l0.209-2.47l0.583-0.827l-0.544-0.549l1.785-2.675l0.143-1.044l5.384-2.892l0.272-0.562l-0.903-1.116l0,0l1.119-1.169l3.943-1.531
l1.908-1.799l3.55,0.392l0.446,0.903l1.683,0.844l0.669-0.182l-0.008-1.693l0.81-0.375l0.2,0.662l0.635-0.073l0.094-2.79
l0.634,0.475l0.199-0.399l-1.545-1.532l0.698-0.55l0.106-1.382l0.915-0.216l0.554-0.887l-1.533-0.292l1.309-1.424l-0.606-1.119
l2.95-3.48l0.657,0.963l0.628-0.06l0.184,1.909l0.617-0.092l-0.486,1.319l1.71,0.571l0.282,0.608l-0.911,1.086l0.113,1.007
l1.207,1.132l0.835-1.585l2.833-1.22l0.686-1.749l-0.446-0.679l0.601-0.54l1.197,0.812l1.039-0.081l0.188,1.257l1.067,0.426
l2.211-0.908l0.949,0.251l0.127-1.474l-0.545,0.278l-0.577-0.699l1.935-2.565l-1.487-0.273l-0.146-0.549l0.709-0.509l-1.202-0.054
l0.093-1.389l1.031-0.415l2.145-3.249l1.799,0.83l0.088,0.724l0.375-1.371l1.222,0.241l0.352-0.896l2.008-0.288l0.068-0.876
l0.979,0.035l0.393-0.788l-1.692-1.855l0.879,0.099l-0.902-0.929l-0.438,1.104l-0.62-2.001l1.073-0.556l1.637,0.378l1.221,1.39
l-0.183-1.484l0.683-0.02l0.088-0.574l-0.486-1.334l0.362-0.223l0.534,0.679l0.308-0.321l0.216,1.101l-0.526-0.056l0.049,0.433
l0.94,0.156l0.394-1.884l0.846,0.661l0.672-1.056l-0.266-0.886l0.759-0.916l1.931,3.775l0.685,0.127l-0.456,0.734l1.048,1.844
l0.896,0.286l-1.06-1.944l1.242-0.823l2.175,5.223l1.821,0.6l2.284-0.153l1.433,1.58l1.077-0.098l0.743-0.756l4.733-0.445
l0.099-2.055l0.689,0.432l0.239-0.443l-0.526-0.44l0.947,0.151l-0.585-0.51l0.852,0.278l0.826-0.757l-0.361-0.671l0.655-0.793
l-0.668-1.292l1.48,0.899l0.465-1.093l2.006-1.214l0.564,1.433l0.654-1.151l1.094,0.07l-0.008-0.792l-0.9,0.125l-0.732-1.304
l1.814,0.056l0.101-0.96l0.97,0.153l-0.216,0.87l0.658,0.651l0,0l1.098,0.675l-4.66,5.365l-0.755,2.299l-2.305,2.181l-2.871,4.294
l-6.031,5.628l-0.029,1.157l-10.604,5.354l-3.838,2.615l-1.126,1.884l-3.125,2.886v0.912l-1.717,2.327l-3.43,3.664l-15.853,8.033
l-6.259,4.833l-1.853,2.335l-0.676,2.5l-0.597,0.286l0.188,1.192l1.454,1.261l1.112-0.309l-0.297,3.087L374.37,881.072z"></path>
</a>
</g>
</svg>
<a title="This is some information for our tooltip." class="byrne">Hello Tooltip</a>html css css3 svg
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
|
show 1 more comment
3
I have this very simple CSS/HTML code that works on plain HTML and shown as an example at the end of the demo too. However, it fails to work in SVG.
When inspecting the element, the :after code is called but the tooltip can't be seen. Any idea where am I going wrong?
JSFiddle Demo
.land
fill: rgba(255,210,0,0.6);
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
.land:hover
fill:rgb(255,210,0);
.byrne
display: inline;
position: relative;
.byrne:hover:after
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-90 280 1040 870">
<defs>
<amcharts:ammap projection="mercator" leftlongitude="68.183544" toplatitude="37.053723" rightlongitude="97.419080" bottomlatitude="6.751085"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--id:"IN-AN",id:"IN-AP",id:"IN-AR",id:"IN-AS",id:"IN-BR",id:"IN-CH",id:"IN-CT",id:"IN-DD",id:"IN-DL",id:"IN-DN",id:"IN-GA",id:"IN-GJ",id:"IN-HP",id:"IN-HR",id:"IN-JH",id:"IN-JK",id:"IN-KA",id:"IN-KL",id:"IN-LD",id:"IN-MH",id:"IN-ML",id:"IN-MN",id:"IN-MP",id:"IN-MZ",id:"IN-NL",id:"IN-OR",id:"IN-PB",id:"IN-PY",id:"IN-RJ",id:"IN-SK",id:"IN-TG",id:"IN-TN",id:"IN-TR",id:"IN-UP",id:"IN-UT",id:"IN-WB"-->
</defs>
<g>
<a title="This is some information for our tooltip." class="byrne">
<path id="Andhra Pradesh - 37 units" title="Andhra Pradesh" class="land" stroke="#FFFFFF" stroke-width="0.5" d="M374.37,881.072l-0.003,0.009l0,0L374.37,881.072z M375.185,881.023
l-0.485,3.09l-0.941-1.338l-0.021-0.997L375.185,881.023z M374.37,881.072l-0.152-0.778l-0.34,0.55l-1.578,0.121l-0.072-0.907
l-1.126,0.721l2.171,0.952l0,0l-0.028,1.288l0.567,0.174l0.828,1.861l-9.559,4.679l-5.865,2.304l-4.694-1.326l-3.882,0.459
l-3.336,1.656l-3.249,7.113l0.124,1.203l-3.635,3.846l-0.342,0.577l0.48,1.08l-1.186,1.037l-3.787,0.51l-1.083-1.825l0.327-0.966
l0.466,0.007l-0.146-0.72l-3.103-1.083l-3.91,0.753l-2.784,1.329l-2.392,1.574l-1.824,2.035l-1.81,5.579l-2.653,4.202
l-1.344,6.258l1.744,9.312l2.203,3.861l-1.811,12.51l3.009,8.091l-0.217,4.812l2.063,5.512l-3.772-6.844l-0.705-0.319l-0.146,2.37
l-0.771-0.772l0.443-0.765l-0.501-0.097l-1.462,2.297l2.895,2.636l1.961,0.045l1.977,1.75l0,0l0.001,1.418l-0.945-0.527
l-1.194-2.346l-2.048-0.054l-2.162-1.571l-1.972,0.214l-0.104,0.522l1.113,0.222l0.087,0.464l-0.789-0.088l-0.275,0.756
l-0.877,0.219l0.036,0.893l-0.805,0.362l0.551,0.808l-0.733,1.02l-1.945,0.868l-1.331-0.023l-0.536,0.595l-0.673-0.554
l-0.858,0.816l1.665,1.303l-1.061,0.763l-0.563-0.719l-0.893,0.386l0.191-0.707l-0.595,0.118l-0.125-1.401l-2.311,0.977
l-0.825-0.581l-0.339-1.174l-2.797-0.335l-1.42,0.549l1.319,0.58l-0.371,1.849l0.661-0.473l0.247,0.349l-0.625,0.22l0.056,0.562
l-1.989,0.651l0.178,0.889l-1.22,0.877l-1.061-1.183l-1.284,0.151l-0.001,0.845l-0.769,0.515l-0.948,2.064l-2.188-0.183
l-2.341-1.664l-1.707,0.233l-0.547,0.872l0.816,0.439l-1.119-0.028l-0.154-1.774l-3.403,1.089l-1.14-0.286l-0.228,1.381
l-1.116-0.36l-0.98,1.041l0.864,1.596l-0.549-0.005l-1.145,3.958l-0.953,0.716l0.055,1.555l-0.609,0.158l-0.22-0.637l0,0l0,0l0,0
l-0.142,0.046l-0.448-0.045l-0.127,1.07l-0.809,0.027l0.051,1.195l-2.389,0.148l-2.037-1.095l-0.682-1.037l-1.951,0.281
l0.978-0.903l-0.171-0.997l0,0l0.535-2.527l1.623,0.006l1.107-2.158l0.861,0.877l1.504-0.146l-0.344-1.812l0.922,0.143
l-0.167-1.821l1.388-0.566l-0.07-0.771l0.681-0.419l-0.502-0.595l1.579-0.985l-0.736-0.82l0.727-0.453l0.23-1.544l-0.571-0.999
l-0.912,1.172l-1.284-1.397l-0.936,0.255l-0.301-0.554l-0.869,0.411l-0.635-0.438l0.795-0.329l-1.105-0.607l0.933-5.962
l-4.268-0.243l-1.162,0.824l0.28-1.599l-0.875-0.194l-0.125-0.676l-1.962,0.357l-0.586-0.848l0.15-0.567l1.082,0.102l0.105-0.691
l-0.64-0.623l0.872-1.163l-0.123-1.712l-1.895-1.228l-0.088,0.908l-1.377-0.235l-0.507,1.111l-0.555,0.006l-0.055-1.614
l0.931-0.352l-0.304-1.532l-1.435,1.429l-0.644-0.91l-1.797-0.099l-0.312,0.703l0.559,1.286l-1.353,0.661l0.063,0.617
l-1.717,0.599l-0.108,1.545l-0.345-0.768l-0.833,0.245l0.17-0.677l-0.552,0.045l-1.011,0.547l0.688,0.541l-0.405,0.21
l-0.671-0.434l-1.035,0.726l-0.953-0.733l-0.192,1.558l-0.653-0.565l-0.115,0.726l-0.869,0.104l0.201-3.246l-1.276-0.059
l0.415-0.961l-1.703-0.283l-1.032,0.534l-0.343-0.844l-1.478,0.477l-0.435-1.485l-0.583,0.897l-0.172-0.528l-0.684,0.571
l-0.046-1.543l-0.551,0.472l0.171,1.147l-1.011,0.203l1.004,0.768l0.114,1.768l-1.866-0.166l-0.921,0.59l-0.882-0.872
l-0.391,1.036l-0.494-0.263l-0.632-1.923l1.279-2.114l0.627-0.109l-0.143-0.755l-2.741-2.603l1.149-1.14l-1.256-1.661
l-1.134-0.103l0.203-0.75l1.192-0.186l0.123-0.627l2.046,0.443l-0.301,2.001l0.402,1.203l2.549,0.297l0.686,1.355l4.348-0.89
l1.054,1.137l-0.143,2.299l1.102-0.029l0.037,0.478l0.93-0.787l-0.516-0.72l0.6-0.875l-1.438-0.01l0.203-1.023l-1.497-0.418
l1.812-2.159l-0.15-0.404l-1.183,0.604l0.084-0.759l0.757-0.14l0.34-0.958l2.896,0.384l-0.109-3.24l-1.087-0.011l-0.324-1.009
l-1.484-0.406l-0.278,0.798l1.065,2.233l-0.835,0.54l-0.742-1.025l0.101-1.054l-2.083-0.183l0.041-1.478l-1.288,0.539
l-2.087-0.716l-1.052,1.349l-0.179,1.992l-0.779,0.105l-0.673-0.811l-2.925-0.015l-0.339-0.86l0.66-0.586l-1.857-1.406
l0.105-1.177l0.784-0.625l0.745,0.377l0.058-1.224l0.775-0.892l-2.7,0.264l-1.116-1.468l-0.729-0.125l-1.035-1.996l0.991-3.564
l-0.464-1.201l1.79-0.665l0.411-4.306l-0.956,0.351l-1.678-0.508l0.544-1.259l-0.27-1.474l0.594-0.522l2.087,1.673l2.75,0.493
l0.494-0.518l1.209,0.01l-0.154,0.641l0.99,0.146l1.967-3.246l-0.574-0.598l0.67-0.169l0.013-1.209l-0.975-0.738l1.132-1.021
l-0.425-0.716l-0.85-0.112l-0.15-1.011l-1.259,0.146l-0.894-3.057l-1.491-1.503l0.04-0.417l1.431,0.172l0.07-3.612l1.365-0.515
l0.91,0.75l0.23-0.916l-2.139-2.037l0.542-2.396l-1.089-0.233l1.144-1.826l2.028-1.118l2.76-0.464l6.817,0.999l0,0l2.537,0.246
l1.376,0.953l1.496-0.272l2.174,0.574l2.316-0.827l2.987,0.993l0.9-1.159l0.716,1.555l1.202,0.47l0.425-0.588l1.016-0.002
l0.401-1.391l1.516-0.774l0.489-2.765l1.559,0.059l2.341-1.402l4.015,0.665l1.515-1.151l2.529,1.955l1.606,0.081l1.609-1.726
l0.035-1.878l0.656,0.099l0.255,1.162l0.99,0.134l-0.131-2.076l0.525-0.552l2.759-1.176l3.811,0.775l1.102-0.608l0.172-7.28
l1.067-1.445l4.199-0.569l1.847-1.303l3.948-0.856l3.318-1.834l0.925,1.062l1.351-0.21l1.052,1.64l1.468-0.114l2.349-2.799
l0.57-1.859l-0.958-1.056l-1.083-0.293l0.469-1.196l0.95-1.578l2.302-0.545l1.263-1.622l0.5,0.865l1.594,0.069l1.025,1.487
l0.467,2.309l1.031,0.437l0.375,1.191l0.7-1.051l1.384,0.936l0.1,0.688l2.785,0.737l1.08-0.677l-1.296-1.006l0.272-1.202
l0.57-0.133l-0.068-1.43l-2.43-0.591l-0.091,0.837l-3.391-1.446l0.798-1.18l-0.568-1.156l0.734-0.571l0.666,1.434l0.673,0.212
l0.941-0.904l0.363-1.567l1.677-0.82l2.524,1.368l-0.446,0.888l2.254-0.257l2.793,1.059l0.689-0.686l0.301-2.598l1.125,0.011
l-0.209-1.505l2.247,0.587l1.446-0.929l3.043-0.51l0.491-2.442l2.24,0.062l1.505-1.924l1.232,0.911l1.146-0.121l2.034-2.377
l0.209-2.47l0.583-0.827l-0.544-0.549l1.785-2.675l0.143-1.044l5.384-2.892l0.272-0.562l-0.903-1.116l0,0l1.119-1.169l3.943-1.531
l1.908-1.799l3.55,0.392l0.446,0.903l1.683,0.844l0.669-0.182l-0.008-1.693l0.81-0.375l0.2,0.662l0.635-0.073l0.094-2.79
l0.634,0.475l0.199-0.399l-1.545-1.532l0.698-0.55l0.106-1.382l0.915-0.216l0.554-0.887l-1.533-0.292l1.309-1.424l-0.606-1.119
l2.95-3.48l0.657,0.963l0.628-0.06l0.184,1.909l0.617-0.092l-0.486,1.319l1.71,0.571l0.282,0.608l-0.911,1.086l0.113,1.007
l1.207,1.132l0.835-1.585l2.833-1.22l0.686-1.749l-0.446-0.679l0.601-0.54l1.197,0.812l1.039-0.081l0.188,1.257l1.067,0.426
l2.211-0.908l0.949,0.251l0.127-1.474l-0.545,0.278l-0.577-0.699l1.935-2.565l-1.487-0.273l-0.146-0.549l0.709-0.509l-1.202-0.054
l0.093-1.389l1.031-0.415l2.145-3.249l1.799,0.83l0.088,0.724l0.375-1.371l1.222,0.241l0.352-0.896l2.008-0.288l0.068-0.876
l0.979,0.035l0.393-0.788l-1.692-1.855l0.879,0.099l-0.902-0.929l-0.438,1.104l-0.62-2.001l1.073-0.556l1.637,0.378l1.221,1.39
l-0.183-1.484l0.683-0.02l0.088-0.574l-0.486-1.334l0.362-0.223l0.534,0.679l0.308-0.321l0.216,1.101l-0.526-0.056l0.049,0.433
l0.94,0.156l0.394-1.884l0.846,0.661l0.672-1.056l-0.266-0.886l0.759-0.916l1.931,3.775l0.685,0.127l-0.456,0.734l1.048,1.844
l0.896,0.286l-1.06-1.944l1.242-0.823l2.175,5.223l1.821,0.6l2.284-0.153l1.433,1.58l1.077-0.098l0.743-0.756l4.733-0.445
l0.099-2.055l0.689,0.432l0.239-0.443l-0.526-0.44l0.947,0.151l-0.585-0.51l0.852,0.278l0.826-0.757l-0.361-0.671l0.655-0.793
l-0.668-1.292l1.48,0.899l0.465-1.093l2.006-1.214l0.564,1.433l0.654-1.151l1.094,0.07l-0.008-0.792l-0.9,0.125l-0.732-1.304
l1.814,0.056l0.101-0.96l0.97,0.153l-0.216,0.87l0.658,0.651l0,0l1.098,0.675l-4.66,5.365l-0.755,2.299l-2.305,2.181l-2.871,4.294
l-6.031,5.628l-0.029,1.157l-10.604,5.354l-3.838,2.615l-1.126,1.884l-3.125,2.886v0.912l-1.717,2.327l-3.43,3.664l-15.853,8.033
l-6.259,4.833l-1.853,2.335l-0.676,2.5l-0.597,0.286l0.188,1.192l1.454,1.261l1.112-0.309l-0.297,3.087L374.37,881.072z"></path>
</a>
</g>
</svg>
<a title="This is some information for our tooltip." class="byrne">Hello Tooltip</a>html css css3 svg
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
1
toolitips in SVG are title elements, not attributes.
– Robert Longson
Mar 27 at 7:21
1
Also SVG content does not support the :after pseudo
– Robert Longson
Mar 27 at 7:29
Thanks. Let me have a look at other options in that case.
– Elaine Byene
Mar 27 at 7:51
1
You're placing HTML elements inside<svg>elements and expect it to work. It won't. SVG is an image format and has a limited subset of elements that can be placed inside them and they do not include HTML elements. Read about SVG links here. Furthermore, opinions won't help you here. Documentation will. SVG elements do not have pseudo-elements. It has never been implemented and while they might be implemented at some future point, they haven't been, yet.
– Andrei Gheorghiu
Mar 27 at 8:49
1
To clarify: the<a>you placed inside your<svg>is not an HTML anchor. It is a custom<svg>element you created. Expect it to behave like a custom<svg>element, not like an HTML anchor.
– Andrei Gheorghiu
Mar 27 at 8:55
|
show 1 more comment
3
3
3
I have this very simple CSS/HTML code that works on plain HTML and shown as an example at the end of the demo too. However, it fails to work in SVG.
When inspecting the element, the :after code is called but the tooltip can't be seen. Any idea where am I going wrong?
JSFiddle Demo
.land
fill: rgba(255,210,0,0.6);
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
.land:hover
fill:rgb(255,210,0);
.byrne
display: inline;
position: relative;
.byrne:hover:after
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-90 280 1040 870">
<defs>
<amcharts:ammap projection="mercator" leftlongitude="68.183544" toplatitude="37.053723" rightlongitude="97.419080" bottomlatitude="6.751085"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--id:"IN-AN",id:"IN-AP",id:"IN-AR",id:"IN-AS",id:"IN-BR",id:"IN-CH",id:"IN-CT",id:"IN-DD",id:"IN-DL",id:"IN-DN",id:"IN-GA",id:"IN-GJ",id:"IN-HP",id:"IN-HR",id:"IN-JH",id:"IN-JK",id:"IN-KA",id:"IN-KL",id:"IN-LD",id:"IN-MH",id:"IN-ML",id:"IN-MN",id:"IN-MP",id:"IN-MZ",id:"IN-NL",id:"IN-OR",id:"IN-PB",id:"IN-PY",id:"IN-RJ",id:"IN-SK",id:"IN-TG",id:"IN-TN",id:"IN-TR",id:"IN-UP",id:"IN-UT",id:"IN-WB"-->
</defs>
<g>
<a title="This is some information for our tooltip." class="byrne">
<path id="Andhra Pradesh - 37 units" title="Andhra Pradesh" class="land" stroke="#FFFFFF" stroke-width="0.5" d="M374.37,881.072l-0.003,0.009l0,0L374.37,881.072z M375.185,881.023
l-0.485,3.09l-0.941-1.338l-0.021-0.997L375.185,881.023z M374.37,881.072l-0.152-0.778l-0.34,0.55l-1.578,0.121l-0.072-0.907
l-1.126,0.721l2.171,0.952l0,0l-0.028,1.288l0.567,0.174l0.828,1.861l-9.559,4.679l-5.865,2.304l-4.694-1.326l-3.882,0.459
l-3.336,1.656l-3.249,7.113l0.124,1.203l-3.635,3.846l-0.342,0.577l0.48,1.08l-1.186,1.037l-3.787,0.51l-1.083-1.825l0.327-0.966
l0.466,0.007l-0.146-0.72l-3.103-1.083l-3.91,0.753l-2.784,1.329l-2.392,1.574l-1.824,2.035l-1.81,5.579l-2.653,4.202
l-1.344,6.258l1.744,9.312l2.203,3.861l-1.811,12.51l3.009,8.091l-0.217,4.812l2.063,5.512l-3.772-6.844l-0.705-0.319l-0.146,2.37
l-0.771-0.772l0.443-0.765l-0.501-0.097l-1.462,2.297l2.895,2.636l1.961,0.045l1.977,1.75l0,0l0.001,1.418l-0.945-0.527
l-1.194-2.346l-2.048-0.054l-2.162-1.571l-1.972,0.214l-0.104,0.522l1.113,0.222l0.087,0.464l-0.789-0.088l-0.275,0.756
l-0.877,0.219l0.036,0.893l-0.805,0.362l0.551,0.808l-0.733,1.02l-1.945,0.868l-1.331-0.023l-0.536,0.595l-0.673-0.554
l-0.858,0.816l1.665,1.303l-1.061,0.763l-0.563-0.719l-0.893,0.386l0.191-0.707l-0.595,0.118l-0.125-1.401l-2.311,0.977
l-0.825-0.581l-0.339-1.174l-2.797-0.335l-1.42,0.549l1.319,0.58l-0.371,1.849l0.661-0.473l0.247,0.349l-0.625,0.22l0.056,0.562
l-1.989,0.651l0.178,0.889l-1.22,0.877l-1.061-1.183l-1.284,0.151l-0.001,0.845l-0.769,0.515l-0.948,2.064l-2.188-0.183
l-2.341-1.664l-1.707,0.233l-0.547,0.872l0.816,0.439l-1.119-0.028l-0.154-1.774l-3.403,1.089l-1.14-0.286l-0.228,1.381
l-1.116-0.36l-0.98,1.041l0.864,1.596l-0.549-0.005l-1.145,3.958l-0.953,0.716l0.055,1.555l-0.609,0.158l-0.22-0.637l0,0l0,0l0,0
l-0.142,0.046l-0.448-0.045l-0.127,1.07l-0.809,0.027l0.051,1.195l-2.389,0.148l-2.037-1.095l-0.682-1.037l-1.951,0.281
l0.978-0.903l-0.171-0.997l0,0l0.535-2.527l1.623,0.006l1.107-2.158l0.861,0.877l1.504-0.146l-0.344-1.812l0.922,0.143
l-0.167-1.821l1.388-0.566l-0.07-0.771l0.681-0.419l-0.502-0.595l1.579-0.985l-0.736-0.82l0.727-0.453l0.23-1.544l-0.571-0.999
l-0.912,1.172l-1.284-1.397l-0.936,0.255l-0.301-0.554l-0.869,0.411l-0.635-0.438l0.795-0.329l-1.105-0.607l0.933-5.962
l-4.268-0.243l-1.162,0.824l0.28-1.599l-0.875-0.194l-0.125-0.676l-1.962,0.357l-0.586-0.848l0.15-0.567l1.082,0.102l0.105-0.691
l-0.64-0.623l0.872-1.163l-0.123-1.712l-1.895-1.228l-0.088,0.908l-1.377-0.235l-0.507,1.111l-0.555,0.006l-0.055-1.614
l0.931-0.352l-0.304-1.532l-1.435,1.429l-0.644-0.91l-1.797-0.099l-0.312,0.703l0.559,1.286l-1.353,0.661l0.063,0.617
l-1.717,0.599l-0.108,1.545l-0.345-0.768l-0.833,0.245l0.17-0.677l-0.552,0.045l-1.011,0.547l0.688,0.541l-0.405,0.21
l-0.671-0.434l-1.035,0.726l-0.953-0.733l-0.192,1.558l-0.653-0.565l-0.115,0.726l-0.869,0.104l0.201-3.246l-1.276-0.059
l0.415-0.961l-1.703-0.283l-1.032,0.534l-0.343-0.844l-1.478,0.477l-0.435-1.485l-0.583,0.897l-0.172-0.528l-0.684,0.571
l-0.046-1.543l-0.551,0.472l0.171,1.147l-1.011,0.203l1.004,0.768l0.114,1.768l-1.866-0.166l-0.921,0.59l-0.882-0.872
l-0.391,1.036l-0.494-0.263l-0.632-1.923l1.279-2.114l0.627-0.109l-0.143-0.755l-2.741-2.603l1.149-1.14l-1.256-1.661
l-1.134-0.103l0.203-0.75l1.192-0.186l0.123-0.627l2.046,0.443l-0.301,2.001l0.402,1.203l2.549,0.297l0.686,1.355l4.348-0.89
l1.054,1.137l-0.143,2.299l1.102-0.029l0.037,0.478l0.93-0.787l-0.516-0.72l0.6-0.875l-1.438-0.01l0.203-1.023l-1.497-0.418
l1.812-2.159l-0.15-0.404l-1.183,0.604l0.084-0.759l0.757-0.14l0.34-0.958l2.896,0.384l-0.109-3.24l-1.087-0.011l-0.324-1.009
l-1.484-0.406l-0.278,0.798l1.065,2.233l-0.835,0.54l-0.742-1.025l0.101-1.054l-2.083-0.183l0.041-1.478l-1.288,0.539
l-2.087-0.716l-1.052,1.349l-0.179,1.992l-0.779,0.105l-0.673-0.811l-2.925-0.015l-0.339-0.86l0.66-0.586l-1.857-1.406
l0.105-1.177l0.784-0.625l0.745,0.377l0.058-1.224l0.775-0.892l-2.7,0.264l-1.116-1.468l-0.729-0.125l-1.035-1.996l0.991-3.564
l-0.464-1.201l1.79-0.665l0.411-4.306l-0.956,0.351l-1.678-0.508l0.544-1.259l-0.27-1.474l0.594-0.522l2.087,1.673l2.75,0.493
l0.494-0.518l1.209,0.01l-0.154,0.641l0.99,0.146l1.967-3.246l-0.574-0.598l0.67-0.169l0.013-1.209l-0.975-0.738l1.132-1.021
l-0.425-0.716l-0.85-0.112l-0.15-1.011l-1.259,0.146l-0.894-3.057l-1.491-1.503l0.04-0.417l1.431,0.172l0.07-3.612l1.365-0.515
l0.91,0.75l0.23-0.916l-2.139-2.037l0.542-2.396l-1.089-0.233l1.144-1.826l2.028-1.118l2.76-0.464l6.817,0.999l0,0l2.537,0.246
l1.376,0.953l1.496-0.272l2.174,0.574l2.316-0.827l2.987,0.993l0.9-1.159l0.716,1.555l1.202,0.47l0.425-0.588l1.016-0.002
l0.401-1.391l1.516-0.774l0.489-2.765l1.559,0.059l2.341-1.402l4.015,0.665l1.515-1.151l2.529,1.955l1.606,0.081l1.609-1.726
l0.035-1.878l0.656,0.099l0.255,1.162l0.99,0.134l-0.131-2.076l0.525-0.552l2.759-1.176l3.811,0.775l1.102-0.608l0.172-7.28
l1.067-1.445l4.199-0.569l1.847-1.303l3.948-0.856l3.318-1.834l0.925,1.062l1.351-0.21l1.052,1.64l1.468-0.114l2.349-2.799
l0.57-1.859l-0.958-1.056l-1.083-0.293l0.469-1.196l0.95-1.578l2.302-0.545l1.263-1.622l0.5,0.865l1.594,0.069l1.025,1.487
l0.467,2.309l1.031,0.437l0.375,1.191l0.7-1.051l1.384,0.936l0.1,0.688l2.785,0.737l1.08-0.677l-1.296-1.006l0.272-1.202
l0.57-0.133l-0.068-1.43l-2.43-0.591l-0.091,0.837l-3.391-1.446l0.798-1.18l-0.568-1.156l0.734-0.571l0.666,1.434l0.673,0.212
l0.941-0.904l0.363-1.567l1.677-0.82l2.524,1.368l-0.446,0.888l2.254-0.257l2.793,1.059l0.689-0.686l0.301-2.598l1.125,0.011
l-0.209-1.505l2.247,0.587l1.446-0.929l3.043-0.51l0.491-2.442l2.24,0.062l1.505-1.924l1.232,0.911l1.146-0.121l2.034-2.377
l0.209-2.47l0.583-0.827l-0.544-0.549l1.785-2.675l0.143-1.044l5.384-2.892l0.272-0.562l-0.903-1.116l0,0l1.119-1.169l3.943-1.531
l1.908-1.799l3.55,0.392l0.446,0.903l1.683,0.844l0.669-0.182l-0.008-1.693l0.81-0.375l0.2,0.662l0.635-0.073l0.094-2.79
l0.634,0.475l0.199-0.399l-1.545-1.532l0.698-0.55l0.106-1.382l0.915-0.216l0.554-0.887l-1.533-0.292l1.309-1.424l-0.606-1.119
l2.95-3.48l0.657,0.963l0.628-0.06l0.184,1.909l0.617-0.092l-0.486,1.319l1.71,0.571l0.282,0.608l-0.911,1.086l0.113,1.007
l1.207,1.132l0.835-1.585l2.833-1.22l0.686-1.749l-0.446-0.679l0.601-0.54l1.197,0.812l1.039-0.081l0.188,1.257l1.067,0.426
l2.211-0.908l0.949,0.251l0.127-1.474l-0.545,0.278l-0.577-0.699l1.935-2.565l-1.487-0.273l-0.146-0.549l0.709-0.509l-1.202-0.054
l0.093-1.389l1.031-0.415l2.145-3.249l1.799,0.83l0.088,0.724l0.375-1.371l1.222,0.241l0.352-0.896l2.008-0.288l0.068-0.876
l0.979,0.035l0.393-0.788l-1.692-1.855l0.879,0.099l-0.902-0.929l-0.438,1.104l-0.62-2.001l1.073-0.556l1.637,0.378l1.221,1.39
l-0.183-1.484l0.683-0.02l0.088-0.574l-0.486-1.334l0.362-0.223l0.534,0.679l0.308-0.321l0.216,1.101l-0.526-0.056l0.049,0.433
l0.94,0.156l0.394-1.884l0.846,0.661l0.672-1.056l-0.266-0.886l0.759-0.916l1.931,3.775l0.685,0.127l-0.456,0.734l1.048,1.844
l0.896,0.286l-1.06-1.944l1.242-0.823l2.175,5.223l1.821,0.6l2.284-0.153l1.433,1.58l1.077-0.098l0.743-0.756l4.733-0.445
l0.099-2.055l0.689,0.432l0.239-0.443l-0.526-0.44l0.947,0.151l-0.585-0.51l0.852,0.278l0.826-0.757l-0.361-0.671l0.655-0.793
l-0.668-1.292l1.48,0.899l0.465-1.093l2.006-1.214l0.564,1.433l0.654-1.151l1.094,0.07l-0.008-0.792l-0.9,0.125l-0.732-1.304
l1.814,0.056l0.101-0.96l0.97,0.153l-0.216,0.87l0.658,0.651l0,0l1.098,0.675l-4.66,5.365l-0.755,2.299l-2.305,2.181l-2.871,4.294
l-6.031,5.628l-0.029,1.157l-10.604,5.354l-3.838,2.615l-1.126,1.884l-3.125,2.886v0.912l-1.717,2.327l-3.43,3.664l-15.853,8.033
l-6.259,4.833l-1.853,2.335l-0.676,2.5l-0.597,0.286l0.188,1.192l1.454,1.261l1.112-0.309l-0.297,3.087L374.37,881.072z"></path>
</a>
</g>
</svg>
<a title="This is some information for our tooltip." class="byrne">Hello Tooltip</a>html css css3 svg
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
I have this very simple CSS/HTML code that works on plain HTML and shown as an example at the end of the demo too. However, it fails to work in SVG.
When inspecting the element, the :after code is called but the tooltip can't be seen. Any idea where am I going wrong?
JSFiddle Demo
.land
fill: rgba(255,210,0,0.6);
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
.land:hover
fill:rgb(255,210,0);
.byrne
display: inline;
position: relative;
.byrne:hover:after
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-90 280 1040 870">
<defs>
<amcharts:ammap projection="mercator" leftlongitude="68.183544" toplatitude="37.053723" rightlongitude="97.419080" bottomlatitude="6.751085"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--id:"IN-AN",id:"IN-AP",id:"IN-AR",id:"IN-AS",id:"IN-BR",id:"IN-CH",id:"IN-CT",id:"IN-DD",id:"IN-DL",id:"IN-DN",id:"IN-GA",id:"IN-GJ",id:"IN-HP",id:"IN-HR",id:"IN-JH",id:"IN-JK",id:"IN-KA",id:"IN-KL",id:"IN-LD",id:"IN-MH",id:"IN-ML",id:"IN-MN",id:"IN-MP",id:"IN-MZ",id:"IN-NL",id:"IN-OR",id:"IN-PB",id:"IN-PY",id:"IN-RJ",id:"IN-SK",id:"IN-TG",id:"IN-TN",id:"IN-TR",id:"IN-UP",id:"IN-UT",id:"IN-WB"-->
</defs>
<g>
<a title="This is some information for our tooltip." class="byrne">
<path id="Andhra Pradesh - 37 units" title="Andhra Pradesh" class="land" stroke="#FFFFFF" stroke-width="0.5" d="M374.37,881.072l-0.003,0.009l0,0L374.37,881.072z M375.185,881.023
l-0.485,3.09l-0.941-1.338l-0.021-0.997L375.185,881.023z M374.37,881.072l-0.152-0.778l-0.34,0.55l-1.578,0.121l-0.072-0.907
l-1.126,0.721l2.171,0.952l0,0l-0.028,1.288l0.567,0.174l0.828,1.861l-9.559,4.679l-5.865,2.304l-4.694-1.326l-3.882,0.459
l-3.336,1.656l-3.249,7.113l0.124,1.203l-3.635,3.846l-0.342,0.577l0.48,1.08l-1.186,1.037l-3.787,0.51l-1.083-1.825l0.327-0.966
l0.466,0.007l-0.146-0.72l-3.103-1.083l-3.91,0.753l-2.784,1.329l-2.392,1.574l-1.824,2.035l-1.81,5.579l-2.653,4.202
l-1.344,6.258l1.744,9.312l2.203,3.861l-1.811,12.51l3.009,8.091l-0.217,4.812l2.063,5.512l-3.772-6.844l-0.705-0.319l-0.146,2.37
l-0.771-0.772l0.443-0.765l-0.501-0.097l-1.462,2.297l2.895,2.636l1.961,0.045l1.977,1.75l0,0l0.001,1.418l-0.945-0.527
l-1.194-2.346l-2.048-0.054l-2.162-1.571l-1.972,0.214l-0.104,0.522l1.113,0.222l0.087,0.464l-0.789-0.088l-0.275,0.756
l-0.877,0.219l0.036,0.893l-0.805,0.362l0.551,0.808l-0.733,1.02l-1.945,0.868l-1.331-0.023l-0.536,0.595l-0.673-0.554
l-0.858,0.816l1.665,1.303l-1.061,0.763l-0.563-0.719l-0.893,0.386l0.191-0.707l-0.595,0.118l-0.125-1.401l-2.311,0.977
l-0.825-0.581l-0.339-1.174l-2.797-0.335l-1.42,0.549l1.319,0.58l-0.371,1.849l0.661-0.473l0.247,0.349l-0.625,0.22l0.056,0.562
l-1.989,0.651l0.178,0.889l-1.22,0.877l-1.061-1.183l-1.284,0.151l-0.001,0.845l-0.769,0.515l-0.948,2.064l-2.188-0.183
l-2.341-1.664l-1.707,0.233l-0.547,0.872l0.816,0.439l-1.119-0.028l-0.154-1.774l-3.403,1.089l-1.14-0.286l-0.228,1.381
l-1.116-0.36l-0.98,1.041l0.864,1.596l-0.549-0.005l-1.145,3.958l-0.953,0.716l0.055,1.555l-0.609,0.158l-0.22-0.637l0,0l0,0l0,0
l-0.142,0.046l-0.448-0.045l-0.127,1.07l-0.809,0.027l0.051,1.195l-2.389,0.148l-2.037-1.095l-0.682-1.037l-1.951,0.281
l0.978-0.903l-0.171-0.997l0,0l0.535-2.527l1.623,0.006l1.107-2.158l0.861,0.877l1.504-0.146l-0.344-1.812l0.922,0.143
l-0.167-1.821l1.388-0.566l-0.07-0.771l0.681-0.419l-0.502-0.595l1.579-0.985l-0.736-0.82l0.727-0.453l0.23-1.544l-0.571-0.999
l-0.912,1.172l-1.284-1.397l-0.936,0.255l-0.301-0.554l-0.869,0.411l-0.635-0.438l0.795-0.329l-1.105-0.607l0.933-5.962
l-4.268-0.243l-1.162,0.824l0.28-1.599l-0.875-0.194l-0.125-0.676l-1.962,0.357l-0.586-0.848l0.15-0.567l1.082,0.102l0.105-0.691
l-0.64-0.623l0.872-1.163l-0.123-1.712l-1.895-1.228l-0.088,0.908l-1.377-0.235l-0.507,1.111l-0.555,0.006l-0.055-1.614
l0.931-0.352l-0.304-1.532l-1.435,1.429l-0.644-0.91l-1.797-0.099l-0.312,0.703l0.559,1.286l-1.353,0.661l0.063,0.617
l-1.717,0.599l-0.108,1.545l-0.345-0.768l-0.833,0.245l0.17-0.677l-0.552,0.045l-1.011,0.547l0.688,0.541l-0.405,0.21
l-0.671-0.434l-1.035,0.726l-0.953-0.733l-0.192,1.558l-0.653-0.565l-0.115,0.726l-0.869,0.104l0.201-3.246l-1.276-0.059
l0.415-0.961l-1.703-0.283l-1.032,0.534l-0.343-0.844l-1.478,0.477l-0.435-1.485l-0.583,0.897l-0.172-0.528l-0.684,0.571
l-0.046-1.543l-0.551,0.472l0.171,1.147l-1.011,0.203l1.004,0.768l0.114,1.768l-1.866-0.166l-0.921,0.59l-0.882-0.872
l-0.391,1.036l-0.494-0.263l-0.632-1.923l1.279-2.114l0.627-0.109l-0.143-0.755l-2.741-2.603l1.149-1.14l-1.256-1.661
l-1.134-0.103l0.203-0.75l1.192-0.186l0.123-0.627l2.046,0.443l-0.301,2.001l0.402,1.203l2.549,0.297l0.686,1.355l4.348-0.89
l1.054,1.137l-0.143,2.299l1.102-0.029l0.037,0.478l0.93-0.787l-0.516-0.72l0.6-0.875l-1.438-0.01l0.203-1.023l-1.497-0.418
l1.812-2.159l-0.15-0.404l-1.183,0.604l0.084-0.759l0.757-0.14l0.34-0.958l2.896,0.384l-0.109-3.24l-1.087-0.011l-0.324-1.009
l-1.484-0.406l-0.278,0.798l1.065,2.233l-0.835,0.54l-0.742-1.025l0.101-1.054l-2.083-0.183l0.041-1.478l-1.288,0.539
l-2.087-0.716l-1.052,1.349l-0.179,1.992l-0.779,0.105l-0.673-0.811l-2.925-0.015l-0.339-0.86l0.66-0.586l-1.857-1.406
l0.105-1.177l0.784-0.625l0.745,0.377l0.058-1.224l0.775-0.892l-2.7,0.264l-1.116-1.468l-0.729-0.125l-1.035-1.996l0.991-3.564
l-0.464-1.201l1.79-0.665l0.411-4.306l-0.956,0.351l-1.678-0.508l0.544-1.259l-0.27-1.474l0.594-0.522l2.087,1.673l2.75,0.493
l0.494-0.518l1.209,0.01l-0.154,0.641l0.99,0.146l1.967-3.246l-0.574-0.598l0.67-0.169l0.013-1.209l-0.975-0.738l1.132-1.021
l-0.425-0.716l-0.85-0.112l-0.15-1.011l-1.259,0.146l-0.894-3.057l-1.491-1.503l0.04-0.417l1.431,0.172l0.07-3.612l1.365-0.515
l0.91,0.75l0.23-0.916l-2.139-2.037l0.542-2.396l-1.089-0.233l1.144-1.826l2.028-1.118l2.76-0.464l6.817,0.999l0,0l2.537,0.246
l1.376,0.953l1.496-0.272l2.174,0.574l2.316-0.827l2.987,0.993l0.9-1.159l0.716,1.555l1.202,0.47l0.425-0.588l1.016-0.002
l0.401-1.391l1.516-0.774l0.489-2.765l1.559,0.059l2.341-1.402l4.015,0.665l1.515-1.151l2.529,1.955l1.606,0.081l1.609-1.726
l0.035-1.878l0.656,0.099l0.255,1.162l0.99,0.134l-0.131-2.076l0.525-0.552l2.759-1.176l3.811,0.775l1.102-0.608l0.172-7.28
l1.067-1.445l4.199-0.569l1.847-1.303l3.948-0.856l3.318-1.834l0.925,1.062l1.351-0.21l1.052,1.64l1.468-0.114l2.349-2.799
l0.57-1.859l-0.958-1.056l-1.083-0.293l0.469-1.196l0.95-1.578l2.302-0.545l1.263-1.622l0.5,0.865l1.594,0.069l1.025,1.487
l0.467,2.309l1.031,0.437l0.375,1.191l0.7-1.051l1.384,0.936l0.1,0.688l2.785,0.737l1.08-0.677l-1.296-1.006l0.272-1.202
l0.57-0.133l-0.068-1.43l-2.43-0.591l-0.091,0.837l-3.391-1.446l0.798-1.18l-0.568-1.156l0.734-0.571l0.666,1.434l0.673,0.212
l0.941-0.904l0.363-1.567l1.677-0.82l2.524,1.368l-0.446,0.888l2.254-0.257l2.793,1.059l0.689-0.686l0.301-2.598l1.125,0.011
l-0.209-1.505l2.247,0.587l1.446-0.929l3.043-0.51l0.491-2.442l2.24,0.062l1.505-1.924l1.232,0.911l1.146-0.121l2.034-2.377
l0.209-2.47l0.583-0.827l-0.544-0.549l1.785-2.675l0.143-1.044l5.384-2.892l0.272-0.562l-0.903-1.116l0,0l1.119-1.169l3.943-1.531
l1.908-1.799l3.55,0.392l0.446,0.903l1.683,0.844l0.669-0.182l-0.008-1.693l0.81-0.375l0.2,0.662l0.635-0.073l0.094-2.79
l0.634,0.475l0.199-0.399l-1.545-1.532l0.698-0.55l0.106-1.382l0.915-0.216l0.554-0.887l-1.533-0.292l1.309-1.424l-0.606-1.119
l2.95-3.48l0.657,0.963l0.628-0.06l0.184,1.909l0.617-0.092l-0.486,1.319l1.71,0.571l0.282,0.608l-0.911,1.086l0.113,1.007
l1.207,1.132l0.835-1.585l2.833-1.22l0.686-1.749l-0.446-0.679l0.601-0.54l1.197,0.812l1.039-0.081l0.188,1.257l1.067,0.426
l2.211-0.908l0.949,0.251l0.127-1.474l-0.545,0.278l-0.577-0.699l1.935-2.565l-1.487-0.273l-0.146-0.549l0.709-0.509l-1.202-0.054
l0.093-1.389l1.031-0.415l2.145-3.249l1.799,0.83l0.088,0.724l0.375-1.371l1.222,0.241l0.352-0.896l2.008-0.288l0.068-0.876
l0.979,0.035l0.393-0.788l-1.692-1.855l0.879,0.099l-0.902-0.929l-0.438,1.104l-0.62-2.001l1.073-0.556l1.637,0.378l1.221,1.39
l-0.183-1.484l0.683-0.02l0.088-0.574l-0.486-1.334l0.362-0.223l0.534,0.679l0.308-0.321l0.216,1.101l-0.526-0.056l0.049,0.433
l0.94,0.156l0.394-1.884l0.846,0.661l0.672-1.056l-0.266-0.886l0.759-0.916l1.931,3.775l0.685,0.127l-0.456,0.734l1.048,1.844
l0.896,0.286l-1.06-1.944l1.242-0.823l2.175,5.223l1.821,0.6l2.284-0.153l1.433,1.58l1.077-0.098l0.743-0.756l4.733-0.445
l0.099-2.055l0.689,0.432l0.239-0.443l-0.526-0.44l0.947,0.151l-0.585-0.51l0.852,0.278l0.826-0.757l-0.361-0.671l0.655-0.793
l-0.668-1.292l1.48,0.899l0.465-1.093l2.006-1.214l0.564,1.433l0.654-1.151l1.094,0.07l-0.008-0.792l-0.9,0.125l-0.732-1.304
l1.814,0.056l0.101-0.96l0.97,0.153l-0.216,0.87l0.658,0.651l0,0l1.098,0.675l-4.66,5.365l-0.755,2.299l-2.305,2.181l-2.871,4.294
l-6.031,5.628l-0.029,1.157l-10.604,5.354l-3.838,2.615l-1.126,1.884l-3.125,2.886v0.912l-1.717,2.327l-3.43,3.664l-15.853,8.033
l-6.259,4.833l-1.853,2.335l-0.676,2.5l-0.597,0.286l0.188,1.192l1.454,1.261l1.112-0.309l-0.297,3.087L374.37,881.072z"></path>
</a>
</g>
</svg>
<a title="This is some information for our tooltip." class="byrne">Hello Tooltip</a> .land
fill: rgba(255,210,0,0.6);
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
.land:hover
fill:rgb(255,210,0);
.byrne
display: inline;
position: relative;
.byrne:hover:after
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-90 280 1040 870">
<defs>
<amcharts:ammap projection="mercator" leftlongitude="68.183544" toplatitude="37.053723" rightlongitude="97.419080" bottomlatitude="6.751085"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--id:"IN-AN",id:"IN-AP",id:"IN-AR",id:"IN-AS",id:"IN-BR",id:"IN-CH",id:"IN-CT",id:"IN-DD",id:"IN-DL",id:"IN-DN",id:"IN-GA",id:"IN-GJ",id:"IN-HP",id:"IN-HR",id:"IN-JH",id:"IN-JK",id:"IN-KA",id:"IN-KL",id:"IN-LD",id:"IN-MH",id:"IN-ML",id:"IN-MN",id:"IN-MP",id:"IN-MZ",id:"IN-NL",id:"IN-OR",id:"IN-PB",id:"IN-PY",id:"IN-RJ",id:"IN-SK",id:"IN-TG",id:"IN-TN",id:"IN-TR",id:"IN-UP",id:"IN-UT",id:"IN-WB"-->
</defs>
<g>
<a title="This is some information for our tooltip." class="byrne">
<path id="Andhra Pradesh - 37 units" title="Andhra Pradesh" class="land" stroke="#FFFFFF" stroke-width="0.5" d="M374.37,881.072l-0.003,0.009l0,0L374.37,881.072z M375.185,881.023
l-0.485,3.09l-0.941-1.338l-0.021-0.997L375.185,881.023z M374.37,881.072l-0.152-0.778l-0.34,0.55l-1.578,0.121l-0.072-0.907
l-1.126,0.721l2.171,0.952l0,0l-0.028,1.288l0.567,0.174l0.828,1.861l-9.559,4.679l-5.865,2.304l-4.694-1.326l-3.882,0.459
l-3.336,1.656l-3.249,7.113l0.124,1.203l-3.635,3.846l-0.342,0.577l0.48,1.08l-1.186,1.037l-3.787,0.51l-1.083-1.825l0.327-0.966
l0.466,0.007l-0.146-0.72l-3.103-1.083l-3.91,0.753l-2.784,1.329l-2.392,1.574l-1.824,2.035l-1.81,5.579l-2.653,4.202
l-1.344,6.258l1.744,9.312l2.203,3.861l-1.811,12.51l3.009,8.091l-0.217,4.812l2.063,5.512l-3.772-6.844l-0.705-0.319l-0.146,2.37
l-0.771-0.772l0.443-0.765l-0.501-0.097l-1.462,2.297l2.895,2.636l1.961,0.045l1.977,1.75l0,0l0.001,1.418l-0.945-0.527
l-1.194-2.346l-2.048-0.054l-2.162-1.571l-1.972,0.214l-0.104,0.522l1.113,0.222l0.087,0.464l-0.789-0.088l-0.275,0.756
l-0.877,0.219l0.036,0.893l-0.805,0.362l0.551,0.808l-0.733,1.02l-1.945,0.868l-1.331-0.023l-0.536,0.595l-0.673-0.554
l-0.858,0.816l1.665,1.303l-1.061,0.763l-0.563-0.719l-0.893,0.386l0.191-0.707l-0.595,0.118l-0.125-1.401l-2.311,0.977
l-0.825-0.581l-0.339-1.174l-2.797-0.335l-1.42,0.549l1.319,0.58l-0.371,1.849l0.661-0.473l0.247,0.349l-0.625,0.22l0.056,0.562
l-1.989,0.651l0.178,0.889l-1.22,0.877l-1.061-1.183l-1.284,0.151l-0.001,0.845l-0.769,0.515l-0.948,2.064l-2.188-0.183
l-2.341-1.664l-1.707,0.233l-0.547,0.872l0.816,0.439l-1.119-0.028l-0.154-1.774l-3.403,1.089l-1.14-0.286l-0.228,1.381
l-1.116-0.36l-0.98,1.041l0.864,1.596l-0.549-0.005l-1.145,3.958l-0.953,0.716l0.055,1.555l-0.609,0.158l-0.22-0.637l0,0l0,0l0,0
l-0.142,0.046l-0.448-0.045l-0.127,1.07l-0.809,0.027l0.051,1.195l-2.389,0.148l-2.037-1.095l-0.682-1.037l-1.951,0.281
l0.978-0.903l-0.171-0.997l0,0l0.535-2.527l1.623,0.006l1.107-2.158l0.861,0.877l1.504-0.146l-0.344-1.812l0.922,0.143
l-0.167-1.821l1.388-0.566l-0.07-0.771l0.681-0.419l-0.502-0.595l1.579-0.985l-0.736-0.82l0.727-0.453l0.23-1.544l-0.571-0.999
l-0.912,1.172l-1.284-1.397l-0.936,0.255l-0.301-0.554l-0.869,0.411l-0.635-0.438l0.795-0.329l-1.105-0.607l0.933-5.962
l-4.268-0.243l-1.162,0.824l0.28-1.599l-0.875-0.194l-0.125-0.676l-1.962,0.357l-0.586-0.848l0.15-0.567l1.082,0.102l0.105-0.691
l-0.64-0.623l0.872-1.163l-0.123-1.712l-1.895-1.228l-0.088,0.908l-1.377-0.235l-0.507,1.111l-0.555,0.006l-0.055-1.614
l0.931-0.352l-0.304-1.532l-1.435,1.429l-0.644-0.91l-1.797-0.099l-0.312,0.703l0.559,1.286l-1.353,0.661l0.063,0.617
l-1.717,0.599l-0.108,1.545l-0.345-0.768l-0.833,0.245l0.17-0.677l-0.552,0.045l-1.011,0.547l0.688,0.541l-0.405,0.21
l-0.671-0.434l-1.035,0.726l-0.953-0.733l-0.192,1.558l-0.653-0.565l-0.115,0.726l-0.869,0.104l0.201-3.246l-1.276-0.059
l0.415-0.961l-1.703-0.283l-1.032,0.534l-0.343-0.844l-1.478,0.477l-0.435-1.485l-0.583,0.897l-0.172-0.528l-0.684,0.571
l-0.046-1.543l-0.551,0.472l0.171,1.147l-1.011,0.203l1.004,0.768l0.114,1.768l-1.866-0.166l-0.921,0.59l-0.882-0.872
l-0.391,1.036l-0.494-0.263l-0.632-1.923l1.279-2.114l0.627-0.109l-0.143-0.755l-2.741-2.603l1.149-1.14l-1.256-1.661
l-1.134-0.103l0.203-0.75l1.192-0.186l0.123-0.627l2.046,0.443l-0.301,2.001l0.402,1.203l2.549,0.297l0.686,1.355l4.348-0.89
l1.054,1.137l-0.143,2.299l1.102-0.029l0.037,0.478l0.93-0.787l-0.516-0.72l0.6-0.875l-1.438-0.01l0.203-1.023l-1.497-0.418
l1.812-2.159l-0.15-0.404l-1.183,0.604l0.084-0.759l0.757-0.14l0.34-0.958l2.896,0.384l-0.109-3.24l-1.087-0.011l-0.324-1.009
l-1.484-0.406l-0.278,0.798l1.065,2.233l-0.835,0.54l-0.742-1.025l0.101-1.054l-2.083-0.183l0.041-1.478l-1.288,0.539
l-2.087-0.716l-1.052,1.349l-0.179,1.992l-0.779,0.105l-0.673-0.811l-2.925-0.015l-0.339-0.86l0.66-0.586l-1.857-1.406
l0.105-1.177l0.784-0.625l0.745,0.377l0.058-1.224l0.775-0.892l-2.7,0.264l-1.116-1.468l-0.729-0.125l-1.035-1.996l0.991-3.564
l-0.464-1.201l1.79-0.665l0.411-4.306l-0.956,0.351l-1.678-0.508l0.544-1.259l-0.27-1.474l0.594-0.522l2.087,1.673l2.75,0.493
l0.494-0.518l1.209,0.01l-0.154,0.641l0.99,0.146l1.967-3.246l-0.574-0.598l0.67-0.169l0.013-1.209l-0.975-0.738l1.132-1.021
l-0.425-0.716l-0.85-0.112l-0.15-1.011l-1.259,0.146l-0.894-3.057l-1.491-1.503l0.04-0.417l1.431,0.172l0.07-3.612l1.365-0.515
l0.91,0.75l0.23-0.916l-2.139-2.037l0.542-2.396l-1.089-0.233l1.144-1.826l2.028-1.118l2.76-0.464l6.817,0.999l0,0l2.537,0.246
l1.376,0.953l1.496-0.272l2.174,0.574l2.316-0.827l2.987,0.993l0.9-1.159l0.716,1.555l1.202,0.47l0.425-0.588l1.016-0.002
l0.401-1.391l1.516-0.774l0.489-2.765l1.559,0.059l2.341-1.402l4.015,0.665l1.515-1.151l2.529,1.955l1.606,0.081l1.609-1.726
l0.035-1.878l0.656,0.099l0.255,1.162l0.99,0.134l-0.131-2.076l0.525-0.552l2.759-1.176l3.811,0.775l1.102-0.608l0.172-7.28
l1.067-1.445l4.199-0.569l1.847-1.303l3.948-0.856l3.318-1.834l0.925,1.062l1.351-0.21l1.052,1.64l1.468-0.114l2.349-2.799
l0.57-1.859l-0.958-1.056l-1.083-0.293l0.469-1.196l0.95-1.578l2.302-0.545l1.263-1.622l0.5,0.865l1.594,0.069l1.025,1.487
l0.467,2.309l1.031,0.437l0.375,1.191l0.7-1.051l1.384,0.936l0.1,0.688l2.785,0.737l1.08-0.677l-1.296-1.006l0.272-1.202
l0.57-0.133l-0.068-1.43l-2.43-0.591l-0.091,0.837l-3.391-1.446l0.798-1.18l-0.568-1.156l0.734-0.571l0.666,1.434l0.673,0.212
l0.941-0.904l0.363-1.567l1.677-0.82l2.524,1.368l-0.446,0.888l2.254-0.257l2.793,1.059l0.689-0.686l0.301-2.598l1.125,0.011
l-0.209-1.505l2.247,0.587l1.446-0.929l3.043-0.51l0.491-2.442l2.24,0.062l1.505-1.924l1.232,0.911l1.146-0.121l2.034-2.377
l0.209-2.47l0.583-0.827l-0.544-0.549l1.785-2.675l0.143-1.044l5.384-2.892l0.272-0.562l-0.903-1.116l0,0l1.119-1.169l3.943-1.531
l1.908-1.799l3.55,0.392l0.446,0.903l1.683,0.844l0.669-0.182l-0.008-1.693l0.81-0.375l0.2,0.662l0.635-0.073l0.094-2.79
l0.634,0.475l0.199-0.399l-1.545-1.532l0.698-0.55l0.106-1.382l0.915-0.216l0.554-0.887l-1.533-0.292l1.309-1.424l-0.606-1.119
l2.95-3.48l0.657,0.963l0.628-0.06l0.184,1.909l0.617-0.092l-0.486,1.319l1.71,0.571l0.282,0.608l-0.911,1.086l0.113,1.007
l1.207,1.132l0.835-1.585l2.833-1.22l0.686-1.749l-0.446-0.679l0.601-0.54l1.197,0.812l1.039-0.081l0.188,1.257l1.067,0.426
l2.211-0.908l0.949,0.251l0.127-1.474l-0.545,0.278l-0.577-0.699l1.935-2.565l-1.487-0.273l-0.146-0.549l0.709-0.509l-1.202-0.054
l0.093-1.389l1.031-0.415l2.145-3.249l1.799,0.83l0.088,0.724l0.375-1.371l1.222,0.241l0.352-0.896l2.008-0.288l0.068-0.876
l0.979,0.035l0.393-0.788l-1.692-1.855l0.879,0.099l-0.902-0.929l-0.438,1.104l-0.62-2.001l1.073-0.556l1.637,0.378l1.221,1.39
l-0.183-1.484l0.683-0.02l0.088-0.574l-0.486-1.334l0.362-0.223l0.534,0.679l0.308-0.321l0.216,1.101l-0.526-0.056l0.049,0.433
l0.94,0.156l0.394-1.884l0.846,0.661l0.672-1.056l-0.266-0.886l0.759-0.916l1.931,3.775l0.685,0.127l-0.456,0.734l1.048,1.844
l0.896,0.286l-1.06-1.944l1.242-0.823l2.175,5.223l1.821,0.6l2.284-0.153l1.433,1.58l1.077-0.098l0.743-0.756l4.733-0.445
l0.099-2.055l0.689,0.432l0.239-0.443l-0.526-0.44l0.947,0.151l-0.585-0.51l0.852,0.278l0.826-0.757l-0.361-0.671l0.655-0.793
l-0.668-1.292l1.48,0.899l0.465-1.093l2.006-1.214l0.564,1.433l0.654-1.151l1.094,0.07l-0.008-0.792l-0.9,0.125l-0.732-1.304
l1.814,0.056l0.101-0.96l0.97,0.153l-0.216,0.87l0.658,0.651l0,0l1.098,0.675l-4.66,5.365l-0.755,2.299l-2.305,2.181l-2.871,4.294
l-6.031,5.628l-0.029,1.157l-10.604,5.354l-3.838,2.615l-1.126,1.884l-3.125,2.886v0.912l-1.717,2.327l-3.43,3.664l-15.853,8.033
l-6.259,4.833l-1.853,2.335l-0.676,2.5l-0.597,0.286l0.188,1.192l1.454,1.261l1.112-0.309l-0.297,3.087L374.37,881.072z"></path>
</a>
</g>
</svg>
<a title="This is some information for our tooltip." class="byrne">Hello Tooltip</a> .land
fill: rgba(255,210,0,0.6);
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
.land:hover
fill:rgb(255,210,0);
.byrne
display: inline;
position: relative;
.byrne:hover:after
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-90 280 1040 870">
<defs>
<amcharts:ammap projection="mercator" leftlongitude="68.183544" toplatitude="37.053723" rightlongitude="97.419080" bottomlatitude="6.751085"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--id:"IN-AN",id:"IN-AP",id:"IN-AR",id:"IN-AS",id:"IN-BR",id:"IN-CH",id:"IN-CT",id:"IN-DD",id:"IN-DL",id:"IN-DN",id:"IN-GA",id:"IN-GJ",id:"IN-HP",id:"IN-HR",id:"IN-JH",id:"IN-JK",id:"IN-KA",id:"IN-KL",id:"IN-LD",id:"IN-MH",id:"IN-ML",id:"IN-MN",id:"IN-MP",id:"IN-MZ",id:"IN-NL",id:"IN-OR",id:"IN-PB",id:"IN-PY",id:"IN-RJ",id:"IN-SK",id:"IN-TG",id:"IN-TN",id:"IN-TR",id:"IN-UP",id:"IN-UT",id:"IN-WB"-->
</defs>
<g>
<a title="This is some information for our tooltip." class="byrne">
<path id="Andhra Pradesh - 37 units" title="Andhra Pradesh" class="land" stroke="#FFFFFF" stroke-width="0.5" d="M374.37,881.072l-0.003,0.009l0,0L374.37,881.072z M375.185,881.023
l-0.485,3.09l-0.941-1.338l-0.021-0.997L375.185,881.023z M374.37,881.072l-0.152-0.778l-0.34,0.55l-1.578,0.121l-0.072-0.907
l-1.126,0.721l2.171,0.952l0,0l-0.028,1.288l0.567,0.174l0.828,1.861l-9.559,4.679l-5.865,2.304l-4.694-1.326l-3.882,0.459
l-3.336,1.656l-3.249,7.113l0.124,1.203l-3.635,3.846l-0.342,0.577l0.48,1.08l-1.186,1.037l-3.787,0.51l-1.083-1.825l0.327-0.966
l0.466,0.007l-0.146-0.72l-3.103-1.083l-3.91,0.753l-2.784,1.329l-2.392,1.574l-1.824,2.035l-1.81,5.579l-2.653,4.202
l-1.344,6.258l1.744,9.312l2.203,3.861l-1.811,12.51l3.009,8.091l-0.217,4.812l2.063,5.512l-3.772-6.844l-0.705-0.319l-0.146,2.37
l-0.771-0.772l0.443-0.765l-0.501-0.097l-1.462,2.297l2.895,2.636l1.961,0.045l1.977,1.75l0,0l0.001,1.418l-0.945-0.527
l-1.194-2.346l-2.048-0.054l-2.162-1.571l-1.972,0.214l-0.104,0.522l1.113,0.222l0.087,0.464l-0.789-0.088l-0.275,0.756
l-0.877,0.219l0.036,0.893l-0.805,0.362l0.551,0.808l-0.733,1.02l-1.945,0.868l-1.331-0.023l-0.536,0.595l-0.673-0.554
l-0.858,0.816l1.665,1.303l-1.061,0.763l-0.563-0.719l-0.893,0.386l0.191-0.707l-0.595,0.118l-0.125-1.401l-2.311,0.977
l-0.825-0.581l-0.339-1.174l-2.797-0.335l-1.42,0.549l1.319,0.58l-0.371,1.849l0.661-0.473l0.247,0.349l-0.625,0.22l0.056,0.562
l-1.989,0.651l0.178,0.889l-1.22,0.877l-1.061-1.183l-1.284,0.151l-0.001,0.845l-0.769,0.515l-0.948,2.064l-2.188-0.183
l-2.341-1.664l-1.707,0.233l-0.547,0.872l0.816,0.439l-1.119-0.028l-0.154-1.774l-3.403,1.089l-1.14-0.286l-0.228,1.381
l-1.116-0.36l-0.98,1.041l0.864,1.596l-0.549-0.005l-1.145,3.958l-0.953,0.716l0.055,1.555l-0.609,0.158l-0.22-0.637l0,0l0,0l0,0
l-0.142,0.046l-0.448-0.045l-0.127,1.07l-0.809,0.027l0.051,1.195l-2.389,0.148l-2.037-1.095l-0.682-1.037l-1.951,0.281
l0.978-0.903l-0.171-0.997l0,0l0.535-2.527l1.623,0.006l1.107-2.158l0.861,0.877l1.504-0.146l-0.344-1.812l0.922,0.143
l-0.167-1.821l1.388-0.566l-0.07-0.771l0.681-0.419l-0.502-0.595l1.579-0.985l-0.736-0.82l0.727-0.453l0.23-1.544l-0.571-0.999
l-0.912,1.172l-1.284-1.397l-0.936,0.255l-0.301-0.554l-0.869,0.411l-0.635-0.438l0.795-0.329l-1.105-0.607l0.933-5.962
l-4.268-0.243l-1.162,0.824l0.28-1.599l-0.875-0.194l-0.125-0.676l-1.962,0.357l-0.586-0.848l0.15-0.567l1.082,0.102l0.105-0.691
l-0.64-0.623l0.872-1.163l-0.123-1.712l-1.895-1.228l-0.088,0.908l-1.377-0.235l-0.507,1.111l-0.555,0.006l-0.055-1.614
l0.931-0.352l-0.304-1.532l-1.435,1.429l-0.644-0.91l-1.797-0.099l-0.312,0.703l0.559,1.286l-1.353,0.661l0.063,0.617
l-1.717,0.599l-0.108,1.545l-0.345-0.768l-0.833,0.245l0.17-0.677l-0.552,0.045l-1.011,0.547l0.688,0.541l-0.405,0.21
l-0.671-0.434l-1.035,0.726l-0.953-0.733l-0.192,1.558l-0.653-0.565l-0.115,0.726l-0.869,0.104l0.201-3.246l-1.276-0.059
l0.415-0.961l-1.703-0.283l-1.032,0.534l-0.343-0.844l-1.478,0.477l-0.435-1.485l-0.583,0.897l-0.172-0.528l-0.684,0.571
l-0.046-1.543l-0.551,0.472l0.171,1.147l-1.011,0.203l1.004,0.768l0.114,1.768l-1.866-0.166l-0.921,0.59l-0.882-0.872
l-0.391,1.036l-0.494-0.263l-0.632-1.923l1.279-2.114l0.627-0.109l-0.143-0.755l-2.741-2.603l1.149-1.14l-1.256-1.661
l-1.134-0.103l0.203-0.75l1.192-0.186l0.123-0.627l2.046,0.443l-0.301,2.001l0.402,1.203l2.549,0.297l0.686,1.355l4.348-0.89
l1.054,1.137l-0.143,2.299l1.102-0.029l0.037,0.478l0.93-0.787l-0.516-0.72l0.6-0.875l-1.438-0.01l0.203-1.023l-1.497-0.418
l1.812-2.159l-0.15-0.404l-1.183,0.604l0.084-0.759l0.757-0.14l0.34-0.958l2.896,0.384l-0.109-3.24l-1.087-0.011l-0.324-1.009
l-1.484-0.406l-0.278,0.798l1.065,2.233l-0.835,0.54l-0.742-1.025l0.101-1.054l-2.083-0.183l0.041-1.478l-1.288,0.539
l-2.087-0.716l-1.052,1.349l-0.179,1.992l-0.779,0.105l-0.673-0.811l-2.925-0.015l-0.339-0.86l0.66-0.586l-1.857-1.406
l0.105-1.177l0.784-0.625l0.745,0.377l0.058-1.224l0.775-0.892l-2.7,0.264l-1.116-1.468l-0.729-0.125l-1.035-1.996l0.991-3.564
l-0.464-1.201l1.79-0.665l0.411-4.306l-0.956,0.351l-1.678-0.508l0.544-1.259l-0.27-1.474l0.594-0.522l2.087,1.673l2.75,0.493
l0.494-0.518l1.209,0.01l-0.154,0.641l0.99,0.146l1.967-3.246l-0.574-0.598l0.67-0.169l0.013-1.209l-0.975-0.738l1.132-1.021
l-0.425-0.716l-0.85-0.112l-0.15-1.011l-1.259,0.146l-0.894-3.057l-1.491-1.503l0.04-0.417l1.431,0.172l0.07-3.612l1.365-0.515
l0.91,0.75l0.23-0.916l-2.139-2.037l0.542-2.396l-1.089-0.233l1.144-1.826l2.028-1.118l2.76-0.464l6.817,0.999l0,0l2.537,0.246
l1.376,0.953l1.496-0.272l2.174,0.574l2.316-0.827l2.987,0.993l0.9-1.159l0.716,1.555l1.202,0.47l0.425-0.588l1.016-0.002
l0.401-1.391l1.516-0.774l0.489-2.765l1.559,0.059l2.341-1.402l4.015,0.665l1.515-1.151l2.529,1.955l1.606,0.081l1.609-1.726
l0.035-1.878l0.656,0.099l0.255,1.162l0.99,0.134l-0.131-2.076l0.525-0.552l2.759-1.176l3.811,0.775l1.102-0.608l0.172-7.28
l1.067-1.445l4.199-0.569l1.847-1.303l3.948-0.856l3.318-1.834l0.925,1.062l1.351-0.21l1.052,1.64l1.468-0.114l2.349-2.799
l0.57-1.859l-0.958-1.056l-1.083-0.293l0.469-1.196l0.95-1.578l2.302-0.545l1.263-1.622l0.5,0.865l1.594,0.069l1.025,1.487
l0.467,2.309l1.031,0.437l0.375,1.191l0.7-1.051l1.384,0.936l0.1,0.688l2.785,0.737l1.08-0.677l-1.296-1.006l0.272-1.202
l0.57-0.133l-0.068-1.43l-2.43-0.591l-0.091,0.837l-3.391-1.446l0.798-1.18l-0.568-1.156l0.734-0.571l0.666,1.434l0.673,0.212
l0.941-0.904l0.363-1.567l1.677-0.82l2.524,1.368l-0.446,0.888l2.254-0.257l2.793,1.059l0.689-0.686l0.301-2.598l1.125,0.011
l-0.209-1.505l2.247,0.587l1.446-0.929l3.043-0.51l0.491-2.442l2.24,0.062l1.505-1.924l1.232,0.911l1.146-0.121l2.034-2.377
l0.209-2.47l0.583-0.827l-0.544-0.549l1.785-2.675l0.143-1.044l5.384-2.892l0.272-0.562l-0.903-1.116l0,0l1.119-1.169l3.943-1.531
l1.908-1.799l3.55,0.392l0.446,0.903l1.683,0.844l0.669-0.182l-0.008-1.693l0.81-0.375l0.2,0.662l0.635-0.073l0.094-2.79
l0.634,0.475l0.199-0.399l-1.545-1.532l0.698-0.55l0.106-1.382l0.915-0.216l0.554-0.887l-1.533-0.292l1.309-1.424l-0.606-1.119
l2.95-3.48l0.657,0.963l0.628-0.06l0.184,1.909l0.617-0.092l-0.486,1.319l1.71,0.571l0.282,0.608l-0.911,1.086l0.113,1.007
l1.207,1.132l0.835-1.585l2.833-1.22l0.686-1.749l-0.446-0.679l0.601-0.54l1.197,0.812l1.039-0.081l0.188,1.257l1.067,0.426
l2.211-0.908l0.949,0.251l0.127-1.474l-0.545,0.278l-0.577-0.699l1.935-2.565l-1.487-0.273l-0.146-0.549l0.709-0.509l-1.202-0.054
l0.093-1.389l1.031-0.415l2.145-3.249l1.799,0.83l0.088,0.724l0.375-1.371l1.222,0.241l0.352-0.896l2.008-0.288l0.068-0.876
l0.979,0.035l0.393-0.788l-1.692-1.855l0.879,0.099l-0.902-0.929l-0.438,1.104l-0.62-2.001l1.073-0.556l1.637,0.378l1.221,1.39
l-0.183-1.484l0.683-0.02l0.088-0.574l-0.486-1.334l0.362-0.223l0.534,0.679l0.308-0.321l0.216,1.101l-0.526-0.056l0.049,0.433
l0.94,0.156l0.394-1.884l0.846,0.661l0.672-1.056l-0.266-0.886l0.759-0.916l1.931,3.775l0.685,0.127l-0.456,0.734l1.048,1.844
l0.896,0.286l-1.06-1.944l1.242-0.823l2.175,5.223l1.821,0.6l2.284-0.153l1.433,1.58l1.077-0.098l0.743-0.756l4.733-0.445
l0.099-2.055l0.689,0.432l0.239-0.443l-0.526-0.44l0.947,0.151l-0.585-0.51l0.852,0.278l0.826-0.757l-0.361-0.671l0.655-0.793
l-0.668-1.292l1.48,0.899l0.465-1.093l2.006-1.214l0.564,1.433l0.654-1.151l1.094,0.07l-0.008-0.792l-0.9,0.125l-0.732-1.304
l1.814,0.056l0.101-0.96l0.97,0.153l-0.216,0.87l0.658,0.651l0,0l1.098,0.675l-4.66,5.365l-0.755,2.299l-2.305,2.181l-2.871,4.294
l-6.031,5.628l-0.029,1.157l-10.604,5.354l-3.838,2.615l-1.126,1.884l-3.125,2.886v0.912l-1.717,2.327l-3.43,3.664l-15.853,8.033
l-6.259,4.833l-1.853,2.335l-0.676,2.5l-0.597,0.286l0.188,1.192l1.454,1.261l1.112-0.309l-0.297,3.087L374.37,881.072z"></path>
</a>
</g>
</svg>
<a title="This is some information for our tooltip." class="byrne">Hello Tooltip</a>html css css3 svg
html css css3 svg
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
edited Mar 27 at 7:35
enxaneta
14.4k3 gold badges10 silver badges23 bronze badges
14.4k3 gold badges10 silver badges23 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
asked Mar 27 at 7:05
Elaine ByeneElaine Byene
1,5775 gold badges21 silver badges52 bronze badges
1,5775 gold badges21 silver badges52 bronze badges
1
toolitips in SVG are title elements, not attributes.
– Robert Longson
Mar 27 at 7:21
1
Also SVG content does not support the :after pseudo
– Robert Longson
Mar 27 at 7:29
Thanks. Let me have a look at other options in that case.
– Elaine Byene
Mar 27 at 7:51
1
You're placing HTML elements inside<svg>elements and expect it to work. It won't. SVG is an image format and has a limited subset of elements that can be placed inside them and they do not include HTML elements. Read about SVG links here. Furthermore, opinions won't help you here. Documentation will. SVG elements do not have pseudo-elements. It has never been implemented and while they might be implemented at some future point, they haven't been, yet.
– Andrei Gheorghiu
Mar 27 at 8:49
1
To clarify: the<a>you placed inside your<svg>is not an HTML anchor. It is a custom<svg>element you created. Expect it to behave like a custom<svg>element, not like an HTML anchor.
– Andrei Gheorghiu
Mar 27 at 8:55
|
show 1 more comment
1
toolitips in SVG are title elements, not attributes.
– Robert Longson
Mar 27 at 7:21
1
Also SVG content does not support the :after pseudo
– Robert Longson
Mar 27 at 7:29
Thanks. Let me have a look at other options in that case.
– Elaine Byene
Mar 27 at 7:51
1
You're placing HTML elements inside<svg>elements and expect it to work. It won't. SVG is an image format and has a limited subset of elements that can be placed inside them and they do not include HTML elements. Read about SVG links here. Furthermore, opinions won't help you here. Documentation will. SVG elements do not have pseudo-elements. It has never been implemented and while they might be implemented at some future point, they haven't been, yet.
– Andrei Gheorghiu
Mar 27 at 8:49
1
To clarify: the<a>you placed inside your<svg>is not an HTML anchor. It is a custom<svg>element you created. Expect it to behave like a custom<svg>element, not like an HTML anchor.
– Andrei Gheorghiu
Mar 27 at 8:55
1
1
toolitips in SVG are title elements, not attributes.
– Robert Longson
Mar 27 at 7:21
toolitips in SVG are title elements, not attributes.
– Robert Longson
Mar 27 at 7:21
1
1
Also SVG content does not support the :after pseudo
– Robert Longson
Mar 27 at 7:29
Also SVG content does not support the :after pseudo
– Robert Longson
Mar 27 at 7:29
Thanks. Let me have a look at other options in that case.
– Elaine Byene
Mar 27 at 7:51
Thanks. Let me have a look at other options in that case.
– Elaine Byene
Mar 27 at 7:51
1
1
You're placing HTML elements inside
<svg> elements and expect it to work. It won't. SVG is an image format and has a limited subset of elements that can be placed inside them and they do not include HTML elements. Read about SVG links here. Furthermore, opinions won't help you here. Documentation will. SVG elements do not have pseudo-elements. It has never been implemented and while they might be implemented at some future point, they haven't been, yet.– Andrei Gheorghiu
Mar 27 at 8:49
You're placing HTML elements inside
<svg> elements and expect it to work. It won't. SVG is an image format and has a limited subset of elements that can be placed inside them and they do not include HTML elements. Read about SVG links here. Furthermore, opinions won't help you here. Documentation will. SVG elements do not have pseudo-elements. It has never been implemented and while they might be implemented at some future point, they haven't been, yet.– Andrei Gheorghiu
Mar 27 at 8:49
1
1
To clarify: the
<a> you placed inside your <svg> is not an HTML anchor. It is a custom <svg> element you created. Expect it to behave like a custom <svg> element, not like an HTML anchor.– Andrei Gheorghiu
Mar 27 at 8:55
To clarify: the
<a> you placed inside your <svg> is not an HTML anchor. It is a custom <svg> element you created. Expect it to behave like a custom <svg> element, not like an HTML anchor.– Andrei Gheorghiu
Mar 27 at 8:55
|
show 1 more comment
1 Answer
1
active
oldest
votes
-2
Did you try adding xlink:? It works fine with xlink:
https://jsfiddle.net/mohzjnf6/
Anchor tags need an xlink: prefix as SVGs is an XML based language (not based on HTML as popularly belived).
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Since it is throughtitleattribute, you need to wait for a second or two for it to appear. That's how the tooltips fromtitlebased attribute work :)
– Prashant
Apr 1 at 7:24
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
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
);
);
draft saved
draft discarded
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%2f55371548%2ftooltip-in-svg-path-isnt-working-while-it-works-in-plain-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-2
Did you try adding xlink:? It works fine with xlink:
https://jsfiddle.net/mohzjnf6/
Anchor tags need an xlink: prefix as SVGs is an XML based language (not based on HTML as popularly belived).
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Since it is throughtitleattribute, you need to wait for a second or two for it to appear. That's how the tooltips fromtitlebased attribute work :)
– Prashant
Apr 1 at 7:24
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
add a comment |
-2
Did you try adding xlink:? It works fine with xlink:
https://jsfiddle.net/mohzjnf6/
Anchor tags need an xlink: prefix as SVGs is an XML based language (not based on HTML as popularly belived).
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Since it is throughtitleattribute, you need to wait for a second or two for it to appear. That's how the tooltips fromtitlebased attribute work :)
– Prashant
Apr 1 at 7:24
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
add a comment |
-2
-2
-2
Did you try adding xlink:? It works fine with xlink:
https://jsfiddle.net/mohzjnf6/
Anchor tags need an xlink: prefix as SVGs is an XML based language (not based on HTML as popularly belived).
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
Did you try adding xlink:? It works fine with xlink:
https://jsfiddle.net/mohzjnf6/
Anchor tags need an xlink: prefix as SVGs is an XML based language (not based on HTML as popularly belived).
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
answered Mar 27 at 10:20
PrashantPrashant
3453 silver badges14 bronze badges
3453 silver badges14 bronze badges
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Since it is throughtitleattribute, you need to wait for a second or two for it to appear. That's how the tooltips fromtitlebased attribute work :)
– Prashant
Apr 1 at 7:24
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
add a comment |
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Since it is throughtitleattribute, you need to wait for a second or two for it to appear. That's how the tooltips fromtitlebased attribute work :)
– Prashant
Apr 1 at 7:24
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Thanks but I don't see any tooltip on the map when I hover over it. I'm on Chrome.
– Elaine Byene
Mar 27 at 14:17
Since it is through
title attribute, you need to wait for a second or two for it to appear. That's how the tooltips from title based attribute work :)– Prashant
Apr 1 at 7:24
Since it is through
title attribute, you need to wait for a second or two for it to appear. That's how the tooltips from title based attribute work :)– Prashant
Apr 1 at 7:24
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
That's not what i want though. I want a css solution where it appears instantly.
– Elaine Byene
Apr 1 at 7:42
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f55371548%2ftooltip-in-svg-path-isnt-working-while-it-works-in-plain-html%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
1
toolitips in SVG are title elements, not attributes.
– Robert Longson
Mar 27 at 7:21
1
Also SVG content does not support the :after pseudo
– Robert Longson
Mar 27 at 7:29
Thanks. Let me have a look at other options in that case.
– Elaine Byene
Mar 27 at 7:51
1
You're placing HTML elements inside
<svg>elements and expect it to work. It won't. SVG is an image format and has a limited subset of elements that can be placed inside them and they do not include HTML elements. Read about SVG links here. Furthermore, opinions won't help you here. Documentation will. SVG elements do not have pseudo-elements. It has never been implemented and while they might be implemented at some future point, they haven't been, yet.– Andrei Gheorghiu
Mar 27 at 8:49
1
To clarify: the
<a>you placed inside your<svg>is not an HTML anchor. It is a custom<svg>element you created. Expect it to behave like a custom<svg>element, not like an HTML anchor.– Andrei Gheorghiu
Mar 27 at 8:55