twitter-bootstrap - 如何使用很棒的字体创建工具提示?
问题描述
如何使用很棒的字体创建工具提示?
我不想要一个按钮,而是一个显示工具提示的很棒的徽标。
下面的代码不起作用。
<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
这是我的页面,没有显示工具提示
解决方案
检查您是否没有忘记一些库。以下代码工作正常。
$(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>
推荐阅读
- php - 如何从php表单在本地目录中创建静态页面
- python - PySpark Dataframe pickle 异常:构造 ClassDict 的预期零参数(对于 pyspark.ml.linalg.DenseVector)
- typescript - WebStorm IDE 对 Vue 3 Composition API 的支持真的很差,还是我的配置搞砸了?
- python - 如何绘制每日最大值
- vue.js - Vue3基于父级传递的异步prop获取数据的最佳方法
- javascript - 在 mousemove 上更改与其中心相关的按钮位置
- r - (堆叠)在 facet_grid 内分组的条形图
- java - 如何在 Java SE 的 MainForm 容器中打开客户 fxml 文件?
- c# - How can I get the next date from a list of DayOfWeek?
- join - Gremlin,组合两个查询并连接数据