bootstrap移动弹窗

发布于 2022-09-04 00:58:41 字数 1697 浏览 15 评论 0

这个官网的例子,我要鼠标移到按钮上右则弹出框,而不是点击才弹框,要怎么做?
就像这个例子地址

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Twitter Bootstrap Popover Example</title>
        <meta name="description" content="Creating Modal Window with Twitter Bootstrap">
        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        
        <!-- 可选的Bootstrap主题文件(一般不用引入) -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

    </head>
    <body>
        <div class="container">
            <h2>Example of creating Modal with Twitter Bootstrap</h2>
            <div class="well">
                <a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Bootstrap Popover">hover for popover</a>
            </div>
        </div>
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $("#example").popover();
            });
        </script>
    </body>

</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

遮了一弯 2022-09-11 00:58:41

hover啊

峩卟喜欢 2022-09-11 00:58:41

a 加上 data-trigger="hover"
或者

$("#example").popover({
    trigger:'hover'
});

传送门 -> https://jsfiddle.net/chexian/...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文