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

yui tooltips on SVG elements

Expand Messages
  • ddweerasiri
    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 , Jan 30, 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;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap: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.
    • 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 2 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.