客服悬浮图标

 <div class="kefu-fix-r">
    <ul>
        <li>
            <a onclick="Tawk_API.toggle()">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#kf-kefu1"></use>
                </svg>
                <p>Online</p>
            </a>
        </li>
        <li>
        	<a id='mail' href="mailto:<?php echo email ; ?>"> 
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#kf-email"></use>
            </svg>
            <p>Email</p>
            <span class="tooltip"><?php echo email  ; ?></span>
            </a>
        </li>
        <li>
        	<a id="msessage" type="button" href="#contact_f">  
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#kf-liuyanban-05"></use>
            </svg>
            <p>Inquire</p>
            <span class="tooltip">Leave a message</span>
            </a>
        </li>
        <li>
        	<a href="http://wa.me/<?php echo whatsapp  ; ?>" id="chat"> 
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#kf-whatsapp"></use>
            </svg>
            <p>Whatsapp</p>
            <span class="tooltip"> <?php echo whatsapp  ; ?></span>
            </a>
        </li>
    </ul>
</div>

引用一下 阿里巴巴矢量图库

<script src="//at.alicdn.com/t/c/font_4830811_dambx8rreah.js"></script>

CSS 用DEEPseak帮我写的

/* 主容器，固定在浏览器右侧 */
.kefu-fix-r {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px 0 0 8px;
    padding: 10px;
}

/* 列表样式 */
.kefu-fix-r ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 列表项样式 */
.kefu-fix-r ul li {
    position: relative; /* 相对定位，用于子元素绝对定位 */
    margin-bottom: 15px;
    text-align: center;
    padding: 10px;
    transition: background-color 0.3s ease;
}

/* 图标样式 */
.kefu-fix-r ul li svg {
    width: 24px;
    height: 24px;
    fill: #333;
}

/* 文字样式 */
.kefu-fix-r ul li p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #666;
}

/* 链接样式 */
.kefu-fix-r ul li a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 鼠标悬停效果 */
.kefu-fix-r ul li:hover {
    background-color: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
}

/* Tooltip（SPAN）样式 */
.kefu-fix-r ul li .tooltip {

    display: none;
    position: absolute;
    right: 85px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #209140;
    color: #fff;
    padding: 11px 12px;
    border-radius: 4px;
    font-size: 12px; 
    white-space: nowrap; /* 防止换行 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影 */
}

/* 鼠标悬停时显示 Tooltip */
.kefu-fix-r ul li:hover .tooltip {
    display: block; /* 显示 */
}