Bootstrap Tooltip 弹出图片提示信息

骑猪看日落 2024-04-17 18:52 56阅读 0赞

在html中引入bootstrap的css和js，然后在需要提示的标签上，加上：

data-toggle="tooltip" data-placement="bottom" title="12345678901"  
1  
然后在JS中加入：

$("\[data-toggle='tooltip'\]").tooltip();  
1  
即可。

例如，在<a>标签上加上以上代码：

<a data-toggle="tooltip" data-placement="bottom" title="12345678901"><i class="fa fa-phone"></i></a>  
1  
效果则为：

![SouthEast][]  
但有时我们不光想简单显示几个字，还想要支持html样式，如加粗的字，图片等，我们可以在标签上再加上：data-html="true"，然后在title属性里就可以写html代码了，如：

<a data-toggle="tooltip" data-placement="bottom"   
   title="微信二维码：<img src='img.png' style='height:100px'>"   
   data-html="true"><i class="fa fa-weixin"></i></a>  
  
效果则为：

![è¿éåå¾çæè¿°][SouthEast 1]

[SouthEast]: https://img-blog.csdn.net/20170222135909410?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmppd3c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20170222140555044?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmppd3c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap Tooltip 弹出图片提示信息

html中引入bootstrap的css和js，然后在需要提示的标签上，加上： data-toggle="tooltip" data-placement="bottom...

骑猪看日落/ 2024年04月17日 18:52/ 0 赞/ 57 阅读

相关弹出提示窗口

UIAlertView \myAlert = \[\[UIAlertView alloc\]initWithTitle:@"显示时间" message:tmpStr deleg

向右看齐/ 2023年10月18日 08:30/ 0 赞/ 51 阅读

相关 echarts tooltip绑定点击事件并弹出弹框

1.问题描述实现如图效果，当鼠标悬浮/点击小脚位置时，弹出tooltip框，并且鼠标点击查看更多按钮弹出弹框。 ![watermark_type_ZmFuZ3poZW

水深无声/ 2023年10月05日 13:51/ 0 赞/ 4 阅读

相关 Bootstrap教程(15)--警告框、弹出框、工具提示框

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 警告框 2.1 普通警告框 2.2

客官°小女子只卖身不卖艺/ 2022年11月01日 00:59/ 0 赞/ 482 阅读

相关学习使用Bootstrap弹出框Popover提示框样式

学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框

女爷i/ 2022年09月10日 10:25/ 0 赞/ 234 阅读

相关 bootstrap弹出框

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

约定不等于承诺〃/ 2022年08月23日 14:00/ 0 赞/ 361 阅读

相关 Bootstrap的工具提示（Tooltip）

在html中引入bootstrap的css和js，然后在需要提示的标签上加上： data-toggle="tooltip" data-placement="botto

妖狐艹你老母/ 2022年07月16日 23:22/ 0 赞/ 175 阅读

相关 asp.net弹出提示信息的几种方式

1、 ClientScript.RegisterStartupScript(GetType(),"message","<script>alert('第一种方式,无白屏

川长思鸟来/ 2022年06月05日 01:23/ 0 赞/ 419 阅读

相关 Bootstrap 弹出输入框

效果 ![这里写图片描述][70] 原理引入 `Bootstrap` 和 `jQuery` 在 `弹框` 中加入输入框，同时 `自动获得焦点`

柔光的暖阳◎/ 2022年05月18日 01:42/ 0 赞/ 342 阅读

相关 Bootstrap4 模态框mode 提示框data-toggle="tooltip" 弹出框 data-toggle="popover"

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 <d

た入场券/ 2021年09月15日 01:58/ 0 赞/ 392 阅读