Bootstrap在弹框Povoper中显示图片

news2024/12/30 3:12:14

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

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.coloradmin.cn/o/1315356.html

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

相关文章

《Linux C编程实战》笔记:文件读写

Linux c下文件读写可用creat&#xff0c;open&#xff0c;close&#xff0c;read&#xff0c;write&#xff0c;lseek等函数。对于跨平台的程序还是用C标准库的fopen等。 open #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open …

【️什么是分布式系统的一致性 ?】

&#x1f60a;引言 &#x1f396;️本篇博文约8000字&#xff0c;阅读大约30分钟&#xff0c;亲爱的读者&#xff0c;如果本博文对您有帮助&#xff0c;欢迎点赞关注&#xff01;&#x1f60a;&#x1f60a;&#x1f60a; &#x1f5a5;️什么是分布式系统的一致性 &#xff1f…

基于QTreeWidget实现带Checkbox的多级组织结构选择树

基于QTreeWidget实现带Checkbox的多级组织结构选择树 采用基于QWidgetMingw实现的原生的组织结构树 通过QTreeWidget控件实现的带Checkbox多级组织结构树。 Qt相关系列文章&#xff1a; 一、Qt实现的聊天画面消息气泡 二、基于QTreeWidget实现多级组织结构 三、基于QTreeWidget…

Git忽略已经提交的文件

原理类似于 Android修改submodule的lib包名

FastAdmin后台安装出现2054错误的解决办法

用Navicat修改密码验证方式。MySQL Workbench的Server菜单中的Users and Privileges菜单中似乎不支持此项修改。 修改完毕以后也许会报错&#xff1a; Access denied for user ‘root‘‘localhost‘ (using password: YES) 用以下命令无密进入mysql。 C:\Program Files\MySQ…

基于SSM的校友录设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Qt实现的聊天画面消息气泡

Qt实现的聊天画面消息气泡 采用基于QWidgetMingw实现的原生的消息气泡 通过覆写QWidget::paintEvent(QPaintEvent *event)方法&#xff0c;每当窗口尺寸变化时都会触发paintEvent事件&#xff0c;在覆写QWidget::paintEvent(QPaintEvent *event)方法中重新绘制聊天气泡在QListW…

Unity2023.3(Unity6)版本开始将可以发布WebGPU

翻译一段官网上的话&#xff1a; 利用Unity 2023.3(正式发布时应该称为Unity6)中最新的WebGPU图形API集成&#xff0c;尝试最大限度的提升您的网络游戏的真实感。 通过与谷歌的战略合作&#xff0c;Unity实时3D平台的强大的图形功能现在为图形丰富的网络游戏进行微调&#xff0…

好用的硬盘分区工具,傲梅分区助手 V10.2

傲梅分区助手软件可以帮助用户在硬盘上创建、调整、合并、删除分区&#xff0c;以及管理磁盘空间等操作。它可以帮助你进行硬盘无损分区操作。 支持系统 目前这款软件支持 Windows 7、Windows 8、Windows 10、Windows 11 等个人系统&#xff0c;还支持 Windows 2012/2016/2019…

城市货车通行码二维码解析

目录 说明 界面 下载 城市货车通行码二维码解析 说明 二维码扫描信息为&#xff1a; tmri://12123?ywlx1041&ewmeyJ0eHpiaCI6IjUxMDcwMDAwMDE0MyIsInR4em1jIjoiQeivgSIsImhwemwiOiIwMiIsImhwaG0iOiLlt51CMkwzMjYiLCJrc3JxIjoiMjAyMS0xMS0yOCIsImpzcnEiOiIyMDIyLTEyL…

蓝桥杯专题-真题版含答案-【祖冲之割圆法】【错误票据】【显示为树形】【汉字相乘】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

yolov8实战第一天——yolov8部署并训练自己的数据集(保姆式教程)

​​​​​​yolov8实战第二天——yolov8训练结果分析&#xff08;保姆式解读&#xff09;-CSDN博客 YOLOv8是一种基于深度神经网络的目标检测算法&#xff0c;它是YOLO&#xff08;You Only Look Once&#xff09;系列目标检测算法的最新版本。YOLOv8的主要改进包括&#xf…

5G工业网关视频传输应用

随着科技的不断进步&#xff0c;5G网络技术已经成为了当前最热门的话题之一。而其中一个引人注目的领域就是5G视频传输和5G工业网关应用。在传统网络通信中&#xff0c;由于带宽和延迟的限制&#xff0c;视频传输常常受到限制&#xff0c;而工业网关应用也存在着链路不稳定、数…

Android12-RK3588_s-开机动画

目录 一、实现自定义开机动画 步骤一&#xff1a;准备 bootanimation.zip 步骤二&#xff1a;将 bootanimation.zip 放到 /system/media/bootanimation.zip下 步骤三&#xff1a;重启即可 二、注意事项 2.1 bootanimation.zip 压缩 2.2 bootanimation.zip 存放 2.3 boo…

STM32_启动流程详解

目录标题 前言 启动流程概述复位中断函数详解SystemInit函数详解 __main函数详解 附录 stm32单片机的存储器映像中断向量表的映射 前言 最近在学习IAP远程OTA升级单片机固件程序&#xff0c;发现自己对单片机的启动流程还不是那么了解&#xff0c;就总结整理一下吧。 启动流程…

如何进行Feign的自定义配置

Feign可以支持很多的自定义配置&#xff0c;下列是部分配置信息 类型作用说明Logger.Level修改日志级别配置键&#xff1a;loggerLevel&#xff0c;包含四种不同的级别&#xff1a;NONE、BASIC、HEADERS、FULLClass<Retryer>失败重试机制配置键&#xff1a;retryer&#…

C语言程序_速通_基础_笔记1_备战大一期末考_12.16

1.固定格式 #include<stdio.h>int main(){return 0;} 2.printf 正常输出&#xff1a;printf("XXXXX"); 如果没有任何换行符什么的&#xff0c;输进去多少个printf&#xff0c;就直接连在一起。 \n&#xff0c;换行 \t 空格 3.int float double char flo…

牛客第一期

1.创建动态数组 #include <iostream> using namespace std;int main() {int n; cin>>n; int *pnew int [n]; int i0; for(i0;i<n;i) {*(pi)ni; } int j0; for(j0;j<n;j) {printf("%d ",*(pj)); } } #include<bits/stdc.h> using namespace s…

文件上传自动化测试方案(超详细)

一、概述 【测试地址】&#xff1a;https://pan.baidu.com 【测试工具】&#xff1a;selenium、requests 【脚本语言】&#xff1a;Python 【运行环境】&#xff1a;Windows 百度网盘作为文件存储及分享的平台&#xff0c;核心功能大部分是对文件的操作&#xff0c;如果要…

2024GoCN线下活动全面启动,赠送深圳MeetUp门票

2024年GoCN社区将全面启动一系列令人期待的线下活动---不仅将在北京、上海、深圳、武汉、成都、杭州、广州、西安等地举办 meetup&#xff0c;还将在北京和上海举办 GopherChina 大会。 2024议题征集通道已开启&#xff0c;欢迎各位有实战经验、独特观点的Gopher前来分享~ 2024…