导航首页 »  jQuery代码  » jQuery实现鼠标移上去显示具体内容(气泡效果)Bootstrap 弹出框(Popover)插件

jQuery实现鼠标移上去显示具体内容(气泡效果)Bootstrap 弹出框(Popover)插件

王朝235网址导航 2021-10-16 50 ℃

1.首先引入

<script src="${ctxStatic}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic}/js/bootstrap.min.js"></script>

2.JS

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

3.HTML

<input value="${Items.expectCost }" style="text-align: right" readOnly 
data-trigger="hover" title="预期金额" data-container="body" 
data-toggle="popover" data-placement="top"  
data-content="${Items.cargoAmount }*${Items.unitCost }=${Items.expectCost }"/>

4.效果

20190827145504300.gif

5.帮助文档,详见Bootstrap 弹出框(Popover)插件


data-trigger="hover"//鼠标移动触发


data-container="body"//向制定元素附件弹出框


data-toggle="popover"//弹弹弹~~~


data-placement="right"//指定弹出方向


data-content="此处是气泡显示的具体内容"


title="此处可输入弹出气泡标题"


data-html="true"换行

免责声明
文章内容由王朝235网址导航整理发布,仅供学习交流使用,不代表本站的观点和立场,具体内容请自行甄别。
加入好处
简单来说就是可以给您的网站提升权重排名,增加外链和网站流量!如果细分的话那么有如下几个好处!
让您的网站更快、更多地被搜索引擎收录
让您的网站名称的关键词在搜索引擎的搜索结果的第一页甚至第一个
通过本站这个分类目录平台从而给您的网站带来巨大流量
如您网站被搜索引擎屏蔽,王朝235网址导航永久缓存贵站信息,通过这个页面浏览者照样借助王朝235网址导航进入您的网站!
温馨提示:如果贵站想上百度,希望贵站能添加本页面为友情链接,感谢您对本站的支持!
<a href="http://www.wc235.com" target="_blank">王朝235网址导航</a>