Html svg图标上的工具提示将不显示

正在尝试将教程中使用的工具提示添加到信息图标。这是密码笔。当我向svg添加适当的类时，工具提示将不会显示。如何在svg信息图标上使用相同的工具提示？多谢各位

正文{
背景颜色：米色；
}
.工具提示{
位置：相对位置；
显示：内联块；
/*边框底部：1px点黑色*/
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-60px；
不透明度：0；
过渡：不透明度0.3s；
}
.tooltip.tooltiptext:：之后{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
不透明度：1；
}

电话
在我上空盘旋
提示文本

您需要将悬停在我上方的

替换为SVG图标。。。如果不是那样，你尝试了什么


正文{
背景颜色：米色；
填充顶部：30px；
}
.工具提示{
位置：相对位置；
显示：内联块；
/*边框底部：1px点黑色*/
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-60px；
不透明度：0；
过渡：不透明度0.3s；
}
.tooltip.tooltiptext:：之后{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
不透明度：1；
}

电话
提示文本
我将tooltip类放在svg元素中。您用一个div括住了svg，并将该类应用于该div。这是有效的。谢谢