bootstrap的tooltip实现鼠标提示悬浮框(实例)

先贴上最终效果图


image.png

参考的菜鸟教程地址 https://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html

要求:

  1. 合成失败时,增加鼠标移入显示悬停信息(信息也从接口读取)

上代码,我是bootstarp渲染的列表页

$(function () { $("[data-toggle='popover']").popover(); });


<span data-toggle="tooltip" data-placement="right"  title="此处是提示信息">合成失败</span>

教程里写 data-placement="right"是弹框显示的方位,但是我换top,bottom都依旧是在下方,我就先这样吧




就这两行代码!!!!我琢磨了一两个小时,冲~

还有一种Bootstrap 的弹出框(Popover)插件,这种是点击的

参考地址https://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近接手的项目,其中有一个页面输入框的提示原本是弹窗提示,但是测试人员说这样不方便,每次提醒完了还要去点击确定才能...
    lllhy阅读 7,328评论 1 3
  • 1、标题 ~ ,所有标题的行高都是 1.1(也就是 font-size 的 1.1 倍)。 2、副标题 ,行高都...
    后除阅读 258评论 0 0
  • 一、小图标 1.如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 实例 2.带有字...
    溺于眼里星河阅读 896评论 0 0
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,129评论 0 42
  • Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip)类似,提供了...
    小挠许阅读 362评论 0 0