我需要做这样的事情： http://www.aparatfilimo.com/
当你继续拍照（鼠标悬停）时，会显示一个图层或其他内容。我尝试使用bootstrap弹出窗口，但问题是，当我将显示类型更改为悬停时，它就像工具提示一样，我不能让用户转到第二层（工具提示内容）并单击＆＃34;阅读更多＆＃34 ;上面的文字。
所以我需要知道创建它的最佳解决方案是什么。
这是我目前的代码：
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="popover"]').popover({html:true , trigger: 'hover', 'placement': 'right' });
});
</script>
<script type="text/javascript">
</script>
<div> <a href="#" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right? <br /> Read More...">Hover over me</a> </div>
谢谢！
答案 0 :(得分：1)
我会尝试通过添加manual触发器并添加您自己的j来修改它。试试这个：
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
html: true,
trigger: 'manual',
placement: 'right'
}).mouseenter(function() {
$(this).popover('show');
$(".popover").mouseenter(function(e) {
e.preventDefault();
$(this).mouseleave(function() {
$(this).popover('hide');
});
});
});
});
答案 1 :(得分：0)
+1 CodeGodie为他的解决方案。我想我还会详细列出您链接的网站内发生的情况。下面是他们代码的简化版本，我为每行添加了注释，以便您可以跟进。
首先，这是JsFiddle链接：https://jsfiddle.net/69k2kjng/36/
$(document).ready(function(){
var hideInfoLayerTimer, // create timer for hiding the info-layer
showInfoLayerTimer, // create timer for showing the info-layer
infoLayer = $('#infoLayer'); // set info-layer to variable
// -------------------------------------------------------
// Bind the mouse events to the movie container, ...
// and also to any children of the movie container.
// -------------------------------------------------------
$('.movie').add('.movie span').on('mouseover',function(e){
showInfoLayer(e.target); // begin the countdown to show the info-layer when the user's cursor hovers over the movie container (or children of the movie container)
})
.on('mouseout',function(e){
hideInfoLayer(); // begin the countdown to hide the info-layer if the user's cursor leaves the movie-container
});
// -------------------------------------------------------
// Bind mouse events to the info-layer container
// -------------------------------------------------------
infoLayer.on('mouseover',function(e){ // reset the timer as the user's cursor hovers over the info-layer
clearInterval(hideInfoLayerTimer);
})
.on('mouseout',function(e){ // begin the hide countdown if the user's cursor leaves the info-layer
hideInfoLayer();
});
// -------------------------------------------------------
// create the function that sets the "showInfoLayerTimer"
// -------------------------------------------------------
function showInfoLayer(obj){
clearInterval(showInfoLayerTimer);
clearInterval(hideInfoLayerTimer);
// assign the movie container to a variable. also, double-check that it is the
// movie container and not a child of the movie container.
var movie = $(obj).hasClass('movie') ? $(obj) : $(obj).parents('.movie');
// when the user's cursor hovers over the movie container for
// longer than .5 seconds, this will display the info-layer
showInfoLayerTimer = setTimeout(function(){
clearInterval(showInfoLayerTimer)
var title = movie.children('.movie-item-title').text(), // get the title text from the movie container
info = movie.children('.movie-item-info').text(), // get the info text from the hidden child of the movie container.
leftPos = movie[0].offsetLeft, // get the left offset of the movie container
topPos = movie[0].offsetTop, // get the right offset of the movie container
osWidth = movie[0].offsetWidth; // get the width of the movie container
// here, we will position the info-layer prior to displaying it.
infoLayer.css('top', topPos) // offset the top of the info-layer
.css('left',leftPos+osWidth-10); // offset the left side of the info layer.
// **Note: Most tooltip plugins check which side of the element has more screen-space, and
// will alternate to align the right of the tooltip to the left of the element or vice-versa.
infoLayer.children('.infolayer-item-title').text(title); // set the text of the info-layer "title" container
infoLayer.children('.infolayer-item-info').text(info); // set the text of the info-layer "info" container
infoLayer.fadeIn('fast'); // show the info-layer
},500);
};
// -------------------------------------------------------
// create the function that sets the hideInfoLayerTimer
// -------------------------------------------------------
function hideInfoLayer(){
clearInterval(showInfoLayerTimer); // clear any existing showInfoLayerTimers
clearInterval(hideInfoLayerTimer); // clear any existing hideInfoLayerTimers
hideInfoLayerTimer = setTimeout(function(){ // hide the info-layer if the user leaves the area for .1 seconds
infoLayer.fadeOut('fast');
},100);
};
});
<div data-movieid="1" class="movie">
<span class="movie-item-title">Lord of The Rings</span>
<span class="movie-item-info" style="display:none;">
A bunch of straight men fight over jewelry.
</span>
</div>
<div data-movieid="2" class="movie">
<span class="movie-item-title">Willy Wonka</span>
<span class="movie-item-info" style="display:none;">
An eccentric billionaire lures kids to his factory.
</span>
</div>
<div id="infoLayer">
<span class="infolayer-item-title"></span>
<hr />
<span class="infolayer-item-info" style="font-style:italic;color:grey;font-size:.9em;text-align:center;width:100%;display:block;"></span>
</div>
.movie {
float: left;
border-radius:4px;
margin: 20px;
background-color: #4072B4;
border: solid 1px black;
color:white;
width: 165px;
padding: 8px;
box-sizing: border-box;
height: 220px;
cursor:pointer;
}
.movie .movie-item-title {
display: block;
font-weight: bold;
font-size: 1.2em;
margin: 50% auto;
text-align: center;
vertical-align: middle;
}
#infoLayer {
color: grey;
height: 100px;
width: 272px;
position: absolute;
border: 3px solid grey;
border-radius: 20px;
display: none;
top: 38px;
left: 378px;
background: rgba(255,255,255,.97);
}
#infoLayer .infolayer-item-title {
font-weight:bold;
font-size:1.2em;
margin:0 auto;
display:block;
padding-left:10px;
padding-top:10px;
}