bootstrap如何实现鼠标悬停显示提示信息

bootstrap如何实现鼠标悬停显示提示信息，下面web建站小编给大家详细介绍一下具体代码！

html代码：

<button type="button" rel="drevil" data-content="具体时间：'+time+'" 
data-container="body" data-toggle="popover" data-placement="bottom"></button>

js代码：

$(function () { $("[data-toggle='popover']").popover(); });　　　　
$("[rel=drevil]").popover({
  trigger:'manual',
  //placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
  //天title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>',
  html: 'true', //needed to show html of course
  //content : '<div id="popOverBox"></div>', //this is the content of the html box. add the image here or anything you want really.
  animation: false
}).on("mouseenter", function () {
  var _this = this;
  $(this).popover("show");
  $(this).siblings(".popover").on("mouseleave", function () {
    $(_this).popover('hide');
  });
}).on("mouseleave", function () {
  var _this = this;
  setTimeout(function () {
    if (!$(".popover:hover").length) {
       $(_this).popover("hide")
    }
  }, 300);
});

全球最受欢迎的前端开源工具库——Bootstrap v4中文文档

如何利用bootstrap做一个年月日的时间选择器

bootstrap框架如何实现拖拽效果

bootstrap图片轮播功能如何停止自动轮播

如何利用bootstrap做一个下拉菜单功能

标签： bootstrap, 提示信息

上面是“bootstrap如何实现鼠标悬停显示提示信息”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3406.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！