fix tooltip flicker

This commit is contained in:
Barış Soner Uşaklı
2023-01-18 22:55:29 -05:00
parent 68f66223e7
commit 6d6c5fb1f8

View File

@@ -5,51 +5,56 @@ define('forum/topic/votes', [
'components', 'translator', 'api', 'hooks', 'bootbox', 'alerts', 'bootstrap', 'components', 'translator', 'api', 'hooks', 'bootbox', 'alerts', 'bootstrap',
], function (components, translator, api, hooks, bootbox, alerts, bootstrap) { ], function (components, translator, api, hooks, bootbox, alerts, bootstrap) {
const Votes = {}; const Votes = {};
let _showTooltip = {};
Votes.addVoteHandler = function () { Votes.addVoteHandler = function () {
_showTooltip = {};
components.get('topic').on('mouseenter', '[data-pid] [component="post/vote-count"]', loadDataAndCreateTooltip); components.get('topic').on('mouseenter', '[data-pid] [component="post/vote-count"]', loadDataAndCreateTooltip);
components.get('topic').on('mouseleave', '[data-pid] [component="post/vote-count"]', destroyTooltip);
}; };
function loadDataAndCreateTooltip(e) { function destroyTooltip() {
e.stopPropagation(); const $this = $(this);
const pid = $this.parents('[data-pid]').attr('data-pid');
const tooltip = bootstrap.Tooltip.getInstance(this);
if (tooltip) {
tooltip.dispose();
$this.attr('title', '');
}
_showTooltip[pid] = false;
}
function loadDataAndCreateTooltip() {
const $this = $(this); const $this = $(this);
const el = $this.parent(); const el = $this.parent();
el.find('.tooltip').css('display', 'none');
const pid = el.parents('[data-pid]').attr('data-pid'); const pid = el.parents('[data-pid]').attr('data-pid');
_showTooltip[pid] = true;
const tooltip = bootstrap.Tooltip.getInstance(this);
if (tooltip) {
tooltip.dispose();
$this.attr('title', '');
}
socket.emit('posts.getUpvoters', [pid], function (err, data) { socket.emit('posts.getUpvoters', [pid], function (err, data) {
if (err) { if (err) {
return alerts.error(err); return alerts.error(err);
} }
if (_showTooltip[pid] && data.length) {
if (data.length) {
createTooltip($this, data[0]); createTooltip($this, data[0]);
} }
}); });
return false;
} }
function createTooltip(el, data) { function createTooltip(el, data) {
const tooltip = bootstrap.Tooltip.getInstance(el);
function doCreateTooltip(title) { function doCreateTooltip(title) {
if (tooltip) {
tooltip.setContent({ '.tooltip-inner': title });
} else {
el.attr('title', title); el.attr('title', title);
(new bootstrap.Tooltip(el, { (new bootstrap.Tooltip(el, {
container: '#content', container: '#content',
})).show(); })).show();
} }
el.parent().find('.tooltip').css('display', '');
}
let usernames = data.usernames let usernames = data.usernames
.filter(name => name !== '[[global:former_user]]'); .filter(name => name !== '[[global:former_user]]');
if (!usernames.length) { if (!usernames.length) {
if (tooltip) {
tooltip.dispose();
}
el.attr('title', '');
return; return;
} }
if (usernames.length + data.otherCount > 6) { if (usernames.length + data.otherCount > 6) {