On hover a tag title is not working as tool-tip when i put svg inside a Tag

Question

I need Grid View on hover a tag as tooltip.

 <a href="javascript:;" title="Grid View">
   <svg width="24px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>F97BF56E-2918-48BD-A2B7-2FA7C41F6C7F</title>
        <desc>Created with sketchtool.</desc>
        <g id="Asset-Artboard-Page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="atoms-/-👍-/-view-grid" transform="translate(0.689655, 0.000000)" fill="#756280">
                <path d="M3,11 L11,11 L11,3 L3,3 M3,21 L11,21 L11,13 L3,13 M13,21 L21,21 L21,13 L13,13 M13,3 L13,11 L21,11 L21,3" id="grid-view-list"></path>
            </g>
        </g>
    </svg>   
</a>

Answer 1

Change the text in title tag of your svg to 'Grid View'.

Or just delete the title tage outright.

So like this:

<a href="javascript:;" title="Grid View">
  <svg width="24px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <desc>Created with sketchtool.</desc>
        <g id="Asset-Artboard-Page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="atoms-/-👍-/-view-grid" transform="translate(0.689655, 0.000000)" fill="#756280">
                <path d="M3,11 L11,11 L11,3 L3,3 M3,21 L11,21 L11,13 L3,13 M13,21 L21,21 L21,13 L13,13 M13,3 L13,11 L21,11 L21,3" id="grid-view-list"></path>
            </g>
        </g>
    </svg>
</a>