jquery Tool tip for svg element path -
<path xmlns="http://www.w3.org/2000/svg" d="m477.63,166.84l0.51,0.9l0.33,0.14l0.9,-0.21l1.91,0.47l3.68,0.16l0.17,-0.05l1.2,-0.75l2.78,-0.67l1.72,1.05l1.02,0.24l-0.97,0.97l-0.91,2.17l0.0,0.24l0.56,1.19l-1.58,-0.3l-0.16,0.01l-2.55,0.95l-0.2,0.28l-0.02,1.23l-1.92,0.24l-1.68,-0.99l-0.27,-0.02l-1.94,0.8l-1.52,-0.07l-0.15,-1.72l-0.12,-0.21l-0.99,-0.76l0.18,-0.18l0.02,-0.39l-0.17,-0.22l0.33,-0.75l0.91,-0.91l0.01,-0.42l-1.16,-1.25l-0.18,-0.89l0.24,-0.27z" data-code="bg" fill="#cecdcd" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" id="test" title="this tool-tip" class="jvectormap-region jvectormap-element"/>
i need title
attribute value tool tip. tried below nothing happened.
$("path", svgroot).mouseover(function() { //var content = $(this).attr("title"); var id = $(this).attr("id"); if (id != undefined) { $(this).tooltip(); } });
in svg tooltip not represented title attribute, need <title>
child element instead.
i.e. while html tooltip looks this:
<p title="title">this paragraph.</p>
an svg tooltip this:
<text y="50"><title>this tooltip</title>this text<text>
or in case
<path xmlns="http://www.w3.org/2000/svg" d="m477.63,166.84l0.51,0.9l0.33,0.14l0.9,-0.21l1.91,0.47l3.68,0.16l0.17,-0.05l1.2,-0.75l2.78,-0.67l1.72,1.05l1.02,0.24l-0.97,0.97l-0.91,2.17l0.0,0.24l0.56,1.19l-1.58,-0.3l-0.16,0.01l-2.55,0.95l-0.2,0.28l-0.02,1.23l-1.92,0.24l-1.68,-0.99l-0.27,-0.02l-1.94,0.8l-1.52,-0.07l-0.15,-1.72l-0.12,-0.21l-0.99,-0.76l0.18,-0.18l0.02,-0.39l-0.17,-0.22l0.33,-0.75l0.91,-0.91l0.01,-0.42l-1.16,-1.25l-0.18,-0.89l0.24,-0.27z" data-code="bg" fill="#cecdcd" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" id="test" class="jvectormap-region jvectormap-element"> <title>this tool-tip</title> </path>
you don't need jquery , won't work svg tooltips anyway.
Comments
Post a Comment