Bootstrap在弹框Povoper中显示图片

项目开发需要实现这个效果,当鼠标划过这个按钮的时候,会显示出指定的图片出来

HTML代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta target="_blank"><link rel="shortcut icon" href="../images/羊羊.png" type="image/x-icon"><link rel="stylesheet" href="../CSS/bootstrap.min.css"><title>Stukk Web</title></head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-warning btn-lg" data-toggle="popover" data-trigger="hover" data-placement="bottom"  >懒洋洋按钮
</button></body>
<script src="../JS/jquery-3.6.0.js">
</script>
<script src="../JS/popper.min.js">
</script>

JQuery代码 

    $(function (){$("[data-toggle='popover']").popover({animation:true,//淡入淡出html:true,//允许插入html代码container:"body",content:"<img src='../images/懒洋洋.jpg' style='width:20px'>",//插入图片的路径 及 样式});});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/224492.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高德地图+Vue中使用出现的问题

最近在做高德地图的逆向地理编码API出现了问题 按着官方的方式写代码运行时出现了问题&#xff0c;随后问了技术人员。 添加之后成功运行

“分割“安卓用户,对标iOS;鸿蒙将携手程序员的春天

近期关于“华为于明年推出不兼容安卓的鸿蒙版本”的消息传出&#xff0c;引起了业界的热议关注。自从2019年8月&#xff0c;美国制裁下&#xff0c;华为不再能够获得谷歌安卓操作系统相关付费服务&#xff0c;如此情况下&#xff0c;华为“备胎”鸿蒙操作系统一夜转正。华为鸿蒙…

IDEA新建jdk8 spring boot项目

今天新建spring boot项目发现JDK版本最低可选17。 但是目前用的最多的还是JDK8啊。 解决办法 Server URL中设置&#xff1a; https://start.aliyun.com/设置完成后&#xff0c;又可以愉快的用jdk8创建项目了。 参考 https://blog.csdn.net/imbzz/article/details/13469117…

新能源汽车生产污废水需要哪些工艺及设备

新能源汽车的快速发展带来了许多环境问题&#xff0c;其中之一就是生产过程中产生的污废水。由于新能源汽车的生产过程与传统汽车有所不同&#xff0c;因此需要采用特定的工艺和设备来处理和处理这些废水。 首先&#xff0c;新能源汽车生产过程中产生的污废水主要来自洗涤和冷却…

Certbot实现 HTTPS 免费证书(Let‘s Encrypt)自动续期

Certbot实现 HTTPS 自动续期 以前阿里云支持申请一年的免费https证书&#xff0c;那每年我们手动更新证书并没什么大问题&#xff0c;但现在阿里云的免费证书仅支持3个月&#xff0c;这意味着每三个月都要要申请一下证书显得非常麻烦。 下面我们使用Certbot实现ssl证书的自动…

后端打印不了trace等级的日志?-SpringBoot日志打印-Slf4j

在调用log变量的方法来输出日志时&#xff0c;有以上5个级别对应的方法&#xff0c;从不太重要&#xff0c;到非常重要 调用不同的方法&#xff0c;就会输出不同级别的日志。 trace&#xff1a;跟踪信息debug&#xff1a;调试信息info&#xff1a;一般信息warn&#xff1a;警告…

Java基础语法面试题

注释 什么Java注释 定义&#xff1a;用于解释说明程序的文字 分类 单行注释 格式&#xff1a; // 注释文字 多行注释 格式&#xff1a; /* 注释文字 /文档注释 格式&#xff1a;/* 注释文字 */ 作用 在程序中&#xff0c;尤其是复杂的程序中&#xff0c;适当地加入注释可…

结构体概念及应用

1.结构体类型的概念 在C语言中提供了很多基本的数据类型&#xff0c;但在实际开发中&#xff0c;无法满足程序中各种复杂数据的要求。有时需要将不同类型的数据组合成一个有机的整体&#xff0c;一边引用。例如&#xff1a; numnamesexagescore001lemonF18 90 在图中列举了…

VRRP协议详解

目录 一、基础概念 1、概念 2、VRRP的基本结构 状态机 二、VRRP主备备份工作过程 1、备份工作过程 2、VRRP的负载分担工作 三、实验 一、基础概念 1、概念 VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;通过配置虚拟路由器的I…

【STM32入门】4.1中断基本知识

1.中断概览 在开展红外传感器遮挡计次的实验之前&#xff0c;有必要系统性的了解“中断”的基本知识. 中断是指&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转…

Oracle MongoDB

听课的时候第一次碰到&#xff0c;可以了解一下吧&#xff0c;就直接开了墨者学院的靶场 #oracle数据库 Oracle数据库注入全方位利用 - 先知社区 这篇写的真的很好 1.判断注入点 当时找了半天没找到 看样子是找到了&#xff0c;测试一下看看 id1 and 11 时没有报错 2.判断字段…

JMeter下载与安装

文章目录 前言一、安装java环境&#xff08;JDK下载与安装&#xff09;二、JMeter下载三、JMeter安装1.解压缩2.配置环境变量 四、JMeter启动&#xff08;启动成功则代表JMeter安装成功&#xff09;五、JMeter汉化&#xff08;将JMeter修改成中文&#xff09;1.方法一&#xff…

深圳锐科达IP网络广播系统

深圳锐科达IP网络广播系统 网络音频广播系统是一种基于TCP/IP网络的纯数字音频广播系统。该网络音频广播系统在物理结构上与标准IP网络完全集成。它不仅真正实现了基于TCP/IP网络的数字音频的广播、直播和点播&#xff0c;而且利用TCP/IP网络的优势&#xff0c;突破了传统模拟广…

DeepStream--调试Gstreamer

DeepStream是基于Gstreamer开发的。有时候需要在Gstreamer加日志&#xff0c;比如想在rtpjitterbuffer里加日志。 首先&#xff0c;执行gst-inspect-1.0 rtpjitterbuffer命令。 从结果中可以看到&#xff0c;rtpjitterbuffer插件的源码是gst-plugins-good&#xff0c;版本是1…

Tomcat的结构分析和请求处理原理解析

目录 Tomcat服务器&#xff1f;Tomcat结构处理请求流程Tomcat作用其他的web服务器 Tomcat服务器&#xff1f; 我们经常开口闭口“服务器”、“服务器”的&#xff0c;其实“服务器”是个很容易引发歧义的概念 其实&#xff0c;Tomcat服务器 Web服务器 Servlet/JSP容器&#…

最新Redis7主从复制(保姆级教程)

前提准备&#xff1a;三台云服务器&#xff08;吐血消费&#xff0c;点赞回血&#xff09;也可以使用虚拟机创建三台&#xff0c;但是我搞了一天也连接不上&#xff0c;要是又可以连接上的大家可以教我一下&#xff0c;也可以参考一下或者大家可以参考一下这个大佬的配置&#…

人工智能与天文:技术前沿与未来展望

人工智能与天文&#xff1a;技术前沿与未来展望 一、引言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;在各个领域的应用越来越广泛。在天文领域&#xff0c;AI也发挥着越来越重要的作用。本文将探讨人工智能与天文学的结合&#xff0c;以及这种结合带…

大数据Doris(三十六):Duplicate 模型(冗余模型)介绍

文章目录 Duplicate 模型(冗余模型)介绍 一、创建doris表 二、插入数据

PR模板,复古怀旧电影效果视频制作PR项目工程文件

Premiere复古怀旧电影效果视频制作pr模板项目工程文件下载 这个PR模板以复古城市印象电影质感为特色&#xff0c;结合了电影和数字故障效果。包含6个场景。可以编辑文本、添加媒体和自定义颜色。包含视频教程。4K版本。不需要任何插件。 软件支持&#xff1a;PR2022 | 分辨率&a…

DBA面试题

Oracle体系结构 &#xff08;1&#xff09;、Oracle实例内存中包含哪些部分? 答: sga与pga sga:是一组共享的内存区域&#xff0c;包含数据字典缓存、库缓存、重做日志缓冲区 Pga:为每个服务器进程分配的非共享内存&#xff0c;存储会话状态和私有SOL工作区 在Oracle数据库中&…