How to add different tooltips using title for <line/> in svg-CodePudding

I am working with a svg element and I want to assign different title to different svg <line>. For example

<!DOCTYPE html>
<html>
   <body>
      <link rel="stylesheet" href="style.css">
      </link>
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
         <line  x1="10" y1="0" x2="220" y2="0" style="stroke:rgb(110, 31, 194);stroke-width:1" />
         <title>original upper location (10,0)</title>
         <line  x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:1" />
         <title>original lower location (10,260)</title>
         <rect x="40" y="50" width="80" height="100" fill="#007bbf">
            <title>A blue box</title>
         </rect>
         <rect x="180" y="50" width="80" height="100" fill="#ec008c">
            <title>A pink box</title>
         </rect>
      </svg>
      <!--<script src="index.js"></script>-->
      <script src="index2.js"></script>
   </body>
</html>

As you can see, it only shows the same tooltip for both the lines, whereas it is different for rects.

CodePudding user response：

Wrap the <line> and <title> tags with a group tag

<!DOCTYPE html>
<html>
   <body>
      <link rel="stylesheet" href="style.css">
      </link>
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
         <g>
         <line  x1="10" y1="0" x2="220" y2="0" style="stroke:rgb(110, 31, 194);stroke-width:4;cursor:pointer" />
            <title>original upper location (10,0)</title>
         </g> 
        <g> 
         <line  x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:2;cursor:pointer" />
         
           <title>original lower location (10,260)</title>
        </g> 
        <g>
         <rect x="40" y="50" width="80" height="100" fill="#007bbf" cursor="pointer"/>
              
          <title>A blue box</title>
        </g>
    <g> 
         <rect x="180" y="50" width="80" height="100" fill="#ec008c" cursor="pointer"/>
            <title>A pink box</title>
    </g>        
      </svg>
      <!--<script src="index.js"></script>-->
      <script src="index2.js"></script>
   </body>
</html>

Update

<title> cannot be nested in base svg shape tags For example: line rect path

CodePudding user response：

You insert the <title> element inside the two <line> elements like how a <div> works:

<!DOCTYPE html>
<html>
   <body>
      <link rel="stylesheet" href="style.css">
      </link>
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
         <line  x1="10" y1="0" x2="220" y2="0" style="stroke:rgb(110, 31, 194);stroke-width:1">
           <title>original upper location (10,0)</title>
         </line>
         <line  x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:1">
           <title>original lower location (10,260)</title>
         </line>
         <rect x="40" y="50" width="80" height="100" fill="#007bbf">
            <title>A blue box</title>
         </rect>
         <rect x="180" y="50" width="80" height="100" fill="#ec008c">
            <title>A pink box</title>
         </rect>
      </svg>
      <!--<script src="index.js"></script>-->
      <script src="index2.js"></script>
   </body>
</html>

A simple but effective solution.

Note: You may want to get the cursor to just the right position to see the tooltips.