Html 我可以在CSS中创建动态工具提示内容吗

在我的css中，我有：

/* css part */
<style>
    #Peel_en_Maas {
        fill: rgb(255, 0, 0);
    }

/* this one works when hovered over*/
    #Peel_en_Maas:hover {
        fill: rgb(255, 113, 0);
    }
</style>

/*css部分*/
#皮尔·恩马斯{
填充：rgb（255,0,0）；
}
/*当鼠标悬停在上面时，这个可以工作*/
#Peel_en_Maas:悬停{
填充：rgb（255、113、0）；
}

在我的html中，我有这样一个SVG：

        <div class="svg-container">
            <svg width="950pt" height="820pt" viewBox="58 25 500 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="pc-vlakken">
                    <path clip-path="url(#SVG_CP_1)" fill="#CCCCCC" id="Peel_en_Maas" cbs="GM1894" fill-rule="evenodd" stroke="#6E6E6E" stroke-width="0.47991" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="   416.50937,486.41522z"/>
                </g>
            </svg>
        </div>

如果没有css元素，填充将是#CCCCCC，一切正常。 现在我想在CSS中添加一个工具提示，因为我无法更改svg。有没有办法在CSS部分中添加工具提示。。？css部分用php填充，并与包含svg的html放在一起