时间戳

首页 > 解决方案 > bootstrap 3 glyphicons 在悬停时显示文本

html - bootstrap 3 glyphicons 在悬停时显示文本

问题描述

在我的 html 中，我得到了带有以下代码的 Bootstrap glyphicons：

<span class="glyphicon glyphicon-copy" style="cursor:pointer;font-size:20px;">
</span>

是否可以像使用img标签一样在悬停时显示一些文本。尝试添加alt属性，但没有成功。也许有一些 polifills （工具提示）或类似的东西？使用 Bootstrap-3。

谢谢你。

标签： htmltwitter-bootstrap

解决方案

如果要添加工具提示，请使用：

HTML

    <span 
        class="glyphicon glyphicon-copy"
        data-toggle="tooltip"
        style="cursor:pointer;font-size:20px;"
        title="myText"
    ></span>

JS

    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); 
        });
    </script>

否则你可以只为你的元素添加data-title属性<span>

    <span
        class="glyphicon glyphicon-copy"
        data-toggle="tooltip"
        data-title="myText"
        style="cursor:pointer;font-size:20px;"
    ></span>

推荐阅读