将鼠标悬停在图像上时，Bootstrap 4 Popover

时间：2018-03-14 03:58:48

标签： javascript html css twitter-bootstrap

我试图浏览其他帖子，看看是否有相似的帖子。他们有，但他们是为Bootstrap 2和3，建议不起作用。有没有人有建议，当你将鼠标悬停在图像缩略图上时，它会显示弹出窗口？

<img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="">

https://jsfiddle.net/umanLb3w/10/

1 个答案:

答案 0 :(得分：1)

试试这个

只需添加： data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out." data-trigger="hover"此hover popover。

以下是工作演示。

＆＃13;
＆＃13; 
$(function () {
  $('[data-toggle="popover"]').popover()
})
＆＃13; 
.logo {
     z-index: 0;
}
 h5 {
     color: #FDFFFC;
}
 h4 {
     color: #F1D302 
}
 .row {
     overflow: scroll;
     width: 100%;
     z-index: 1;
}
 .row__inner {
     -webkit-transition: 450ms -webkit-transform;
     transition: 450ms -webkit-transform;
     transition: 450ms transform;
     transition: 450ms transform, 450ms -webkit-transform;
     font-size: 0;
     white-space: nowrap;
     margin: 50px 0;
     padding-bottom: 30px;
     padding-bottom: 30px;
}
 .tile {
     position: relative;
     display: inline-block;
     width: 250px;
     height: 250px;
     margin-right: 10px;
     margin-left: 50px;
     font-size: 20px;
     cursor: pointer;
     -webkit-transition: 450ms all;
     transition: 450ms all;
     -webkit-transform-origin: center left;
     transform-origin: center left;
}
 .tile__img {
     width: 250px;
     height: 250px;
     -o-object-fit: cover;
     object-fit: cover;
}
 .tile__details {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     font-size: 10px;
     opacity: 0;
     background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
     background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
     -webkit-transition: 450ms opacity;
     transition: 450ms opacity;
}
 .tile__details:after, .tile__details:before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     display: #000;
}
 body {
     background-color: #161925;
}
 .tile__details:before {
     left: 0;
     width: 100%;
     font-size: 30px;
     margin-left: 7px;
     margin-top: -18px;
     text-align: center;
     z-index: 2;
}
 .tile:hover .tile__details {
     opacity: 1;
}
 .tile__title {
     position: absolute;
     bottom: 0;
     padding: 10px;
}
 .row__inner:hover {
     -webkit-transform: translate3d(-62.5px, 0, 0);
     transform: translate3d(-62.5px, 0, 0);
}
 .row__inner:hover .tile {
     opacity: 0.3;
}
 .row__inner:hover .tile:hover {
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     opacity: 1;
}
 .tile:hover ~ .tile {
     -webkit-transform: translate3d(125px, 0, 0);
     transform: translate3d(125px, 0, 0);
}
 h1 {
     color: #F1D302;
}
 a:hover {
     color: #F1D302;
}
 .checkbox-wrapper {
     height: 13px;
     width: 13px;
}
 .btn {
     background-color: #F1D302;
}
 body {
     font-family: 'Rubik', sans-serif;
     background-color: #161925;
}
 .card-img-top {
     height: 300px;
     width: 100%;
}
 .btn-xlong {
     padding: 10px 50px;
     font-size: 22px;
     line-height: normal;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
}
 .steps-form-3 {
     width: 2px;
     height: 470px;
     position: relative;
}
 .steps-form-3 .steps-row-3 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
}
 .steps-form-3 .steps-row-3:before {
     top: 14px;
     bottom: 0;
     position: absolute;
     content: "";
     width: 2px;
     height: 100%;
     background-color: #7283a7;
}
 .steps-form-3 .steps-row-3 .steps-step-3 {
     height: 150px;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     text-align: center;
     position: relative;
}
 .steps-form-3 .steps-row-3 .steps-step-3.no-height {
     height: 50px;
}
 .steps-form-3 .steps-row-3 .steps-step-3 p {
     margin-top: 0.5rem;
}
 .steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
     opacity: 1 !important;
     filter: alpha(opacity=100) !important;
}
 .steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
     width: 60px;
     height: 60px;
     border: 2px solid #59698D;
     background-color: white !important;
     color: #59698D !important;
     border-radius: 50%;
     padding: 18px 18px 15px 15px;
     margin-top: -22px;
}
 .steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
     border: 2px solid #4285F4;
     color: #4285F4 !important;
     background-color: white !important;
}
 .steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
     font-size: 1.7rem;
}
 ::-webkit-scrollbar {
     width: 0px;
     background-color: #161925;
}
 ::-webkit-scrollbar-thumb {
     background-color: #F1D302;
     border-radius:10px;
     box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
＆＃13; 
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body style="background-color: #161925;">
    <div class="row h-100 justify-content-center">
        <div class="logo">
            <a href="/HTML_Pages/Home.html">
                <div clas="col"><img src="/img/logo.png" class="img-fluid" width="200" height="400" alt="Responsive image"> </div>
            </a>
        </div>
    </div>
    <div class="container-fluid">
        <h1>STEMuli Content</h1>
        <div class="row">
            <div class="row__inner">
                <div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
                    <div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" data-toggle="popover" data-content="Default popover" data-trigger="hover"> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
                    <div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
                    <div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
                    <div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
                    <div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/6.png" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row__inner">
                <div class="tile">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/7.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/8.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/2.png" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/10.png" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/11.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile__media"> <img class="tile__img" src="/img/corpUpload/12.jpg" alt="" /> </div>
                    <div class="tile__details">
                        <div class="tile__title">
                            <h5></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题