Loading ...
Sorry, an error occurred while loading the content.

yui tooltips on SVG elements

Expand Messages
  • Denis Weerasiri
    Hi, I m new to SVG and I need to generate some svg images in a Web Browser and I need to display yui tooltip on those svg elements. My Code is as follows
    Message 1 of 2 , Feb 1, 2009
    • 0 Attachment
      Hi,
      I'm new to SVG and I need to generate some svg images in a Web Browser
      and I need to display yui tooltip on those svg elements.

      My Code is as follows

      <?xml version="1.0" encoding="utf-8"?>
      <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
      'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
      <svg contentScriptType="text/ecmascript"
      xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
      contentStyleType="text/css" preserveAspectRatio="xMidYMid meet"
      xmlns="http://www.w3.org/2000/svg" version="1.0">
      <link rel="stylesheet" type="text/css"
      href="yui/css/container.css"></link>

      <!-- Dependencies -->
      <script type="text/javascript" src="yui/yahoo-dom-event.js"></script>

      <!-- OPTIONAL: Animation (only required if using ContainerEffect) -->
      <script type="text/javascript" src="yui/animation.js"></script>

      <!-- Source file -->
      <script type="text/javascript" src="yui/container.js"></script>

      <g id="Receive1"
      onmouseout="this.style.opacity=0.25;this.filters.alpha.opacity=40"
      style="opacity:0.251" onmouseover="myTooltip = new
      YAHOO.widget.Tooltip('myTooltip', {context:'Receive1',text:'You have
      hovered over myContextEl.',showDelay:500
      });changeCol(evt);this.style.opacity=1;this.filters.alpha.opacity=100">
      <image x="133" y="30" width="48"
      xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
      xlink:actuate="onLoad" id="Receive1"
      height="48" preserveAspectRatio="xMidYMid meet"
      xlink:show="embed"

      xlink:href="/home/denis/IdeaProjects/MyProject/BPEL2SVGIcons/icons/receive.png"/\
      >
      <a xlink:actuate="onRequest" xlink:type="simple"
      id="Receive1" xlink:show="replace"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <text x="133" y="88" id="Receive1.Text"

      style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;f\
      ont-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anc\
      hor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-lineca\
      p:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Arial
      Narrow;-inkscape-font-specification:Arial Narrow"
      xml:space="preserve">
      <tspan x="133" id="tspan-Receive1"
      y="88">Receive1</tspan>
      </text>
      </a>
      </g>


      </svg>

      Here inside the <g/> I have used the "onmouseover" attribute to
      generate the tooltip.
      But it gives an error message like this

      YAHOO is not defined
      [Break on this error] myTooltip = new YAHOO.widget.Tooltip('m...red
      over myContextEl.',showDelay:500 });

      Can anyone suggest me an solution for this?
      As I need to display multiline tooltip I can't use "title" or
      "xlink:title" attribute to display the tooltip.
    Your message has been successfully submitted and would be delivered to recipients shortly.