This is the Html for the popover, which is used to display a summary of a user profile when someone hover's over the profile thumbnail.
<div class="user-avatar" style="background-image: url({{ $chat->from->small_avatar }}); " data-container="body" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='group-chat-popover'>
<div class='popover-header'>
<div class='chat-avatar' style='background-image:url({{ $chat->from->small_avatar }})'></div>
<div class='header-description'>
<p class='user-name'>{{ $chat->from->full_name }}</p>
<p class='user-bio'>{{ $chat->from->about }}</p>
</div>
</div>
<div class='user-activity'>
<div class='activity'>
<p class='activity-category'>Reputation</p>
<p class='activity-count'>{{ $chat->from->total_points }}</p></div>
<div class='activity'>
<p class='activity-category'>Submissions</p>
<p class='activity-count'>{{ $chat->from->approved_tutorials->count() }}</p></div>
<div class='activity'>
<p class='activity-category'>Upvotes</p>
<p class='activity-count'>{{ $chat->from->votes->count() }}</p></div>
</div>
<div class='popover-footer'>
<a href='{{ $chat->from->profile_link }}' class='btn btn-sm btn-select'>Open profile</a>
<a href='{{ $chat->from->chat_link }}' class='btn btn-sm btn-primary'>Private Chat</a>
</div>
</div>">
</div>
Here is the code I have written to trigger and close the popover. Also I am using the bootstrap popovers here.
var timer;
$(".user-avatar").popover({
trigger: "manual",
animation: false
})
.on("mouseenter", function(){
var self = $(this);
timer = setTimeout(function(){
self.popover("show");
}, 1000);
})
.on("mouseleave", function () {
clearTimeout(timer);
$(".popover").on("mouseleave", function () {
$(this).popover('hide');
});
setTimeout(function () {
if (!$(".popover:hover").length) {
$(this).popover("hide");
}
}, 30);
});
The issue is I am not able to hide the popover when I mouseenter the thumbnail but directly mouseleave the thumbnail (without mouseleaving the popover).
I want the following behaviour:
Popover show when I mouseenter the thumbnail. Popover stays open when I mouseenter the popover. Popover hides when I mouseleave the popover. Popover hides when I mouseleave the thumbnail (without going to the popover).
I am not able to achieve the last point!
You should probably set a timer when the mouse leaves the element and clear it when the mouse enters the popover. Something like this:
var timer;
$(".user-avatar").popover({
trigger: "manual",
animation: false
}).on("mouseenter", function(){
$(this).popover("show");
}).on("mouseleave", function () {
var self = $(this);
timer = setTimeout(function(){ // You may want to keep a reference to the time of each element.
self.popover("hide");
}, 1000);
});
$(".popover").on("mouseenter", function(){
clearTimer(timer);
}).on("mouseleave", function () {
$(this).popover("hide"); // I'm not sure this will work, you may have to keep a reference to the element that owns this popover.
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.