【问题标题】:How to create a tooltip with an awesome font?如何使用很棒的字体创建工具提示?
【发布时间】:2018-09-09 18:06:15
【问题描述】:

如何创建带有很棒字体的工具提示?

我不想要一个按钮,而是一个显示工具提示的很棒的徽标。

下面的代码不起作用。

<i class="fas fa-info-circle fa-2x" data-toggle="tooltip" data-placement="left" title="Tooltip on left"></i>

这里是引导工具提示:

https://getbootstrap.com/docs/3.3/javascript/#tooltips-examples

以下是我想使用的令人敬畏的事实:

https://fontawesome.com/icons/info-circle?style=solid

这是我的页面,工具提示没有显示

【问题讨论】:

  • 我无法获得工具提示。一个想法?

标签: twitter-bootstrap tooltip font-awesome


【解决方案1】:

检查您是否忘记了一些库。以下代码运行正常。

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BootstrapJS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<i class="fas fa-info-circle fa-2x" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></i>

【讨论】:

    猜你喜欢
    • 2015-01-23
    • 2019-01-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-16
    • 2022-01-07
    相关资源
    最近更新 更多