[英]Open tooltipster by clicking prev or next, without needing to click on target specifically
Simply put, I have this navigation: 简而言之,我有这个导航:
jsfiddle at the end. jsfiddle最后。
<div class="country-list">
<div class="country-item active" data-country="pt">PT</div>
<div class="country-item" data-country="be">BE</div>
<div class="country-item" data-country="pl">PL</div>
<div class="country-item" data-country="ge">PT</div>
</div>
<ul class="next-prev">
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
Each country-item has a an equal data to svg country id 每个国家/地区项目都有与svg国家/地区ID相同的数据
<g id="pt" class="enabled"
<g id="be" class="enabled"
Then I have this function and a basic left right nav that uses it in the end to initiate tooltipster, but I dont know how to make it that it would automatically close and open when next is clicked? 然后,我有此功能和一个基本的左右导航,最后使用它来启动工具提示,但是我不知道如何使它在单击下一步时自动关闭和打开? right now I still need to click to open it. 现在,我仍然需要单击以将其打开。
function showMapInfo() {
var dataCountry = $('.country-item.active').data('country');
//console.log(dataCountry);
var countryId;
$('.svg-container .enabled').each( function(){
countryId = $(this).attr("id");
//console.log(countryId);
if (dataCountry === countryId) {
$('.svg-container .enabled').removeClass('active');
$(this).addClass('active');
$('.svg-container .active').tooltipster({
interactive: true,
maxWidth: 300,
distance: 60,
animation: 'grow',
side: 'bottom',
trigger: 'click',
contentAsHTML: true,
content:$('#' + dataCountry).data("description")
});
}
});
}
showMapInfo();
$('.next-prev li').on('click', function () {
if ($(this).hasClass('next')){
if ($('.country-item.active').next().length == 0) {
$('.country-item.active').removeClass('active');
$('.country-item:first-child').addClass('active');
} else {
$('.country-item.active').next().addClass("active").prev().removeClass('active');
console.log($('.country-item.active').next());
}
showMapInfo();
} else {
if ($('.country-item.active').prev().length == 0) {
$('.country-item.active').removeClass('active');
$('.country-item:last-child').addClass('active');
} else {
$('.country-item.active').prev().addClass("active").next().removeClass('active');
console.log($('.country-item.active').prev());
}
showMapInfo();
}
});
How to close/open tooltip by clicking just next/prev without needing to click on it specifically? 如何通过仅单击下一个/上一个来关闭/打开工具提示,而无需专门单击它? Then I could perhaps also have the first one opened if the nav has an active class also. 然后,如果导航仪也有一个活动班级,那么我也许也可以打开第一个。
Clicking anywhere could just close it. 单击任何地方都可以将其关闭。
Jsfiddle: https://jsfiddle.net/rKaiser/kp16ohm8/46/ jsfiddle: https ://jsfiddle.net/rKaiser/kp16ohm8/46/
Figured it out 弄清楚了
Codepen: https://codepen.io/rKaiser/pen/ZgXvzw had to add tooltipsterbundle in the js for some reason, adding the library didnt work. Codepen:出于某种原因, https ://codepen.io/rKaiser/pen/ZgXvzw必须在js中添加tooltipsterbundle,添加库无法正常工作。
$('...selector').tooltipster('show')
is correct. 是正确的。
$(document).ready(function() {
// START MAP FUNCTIONS
var countryId;
$('.svg-container .enabled').each(function () {
countryId = $(this).attr("id");
});
function initTooltipster() {
$('.svg-container .enabled').each(function () {
$(this).tooltipster({
interactive: true,
minIntersection: 64,
repositionOnScroll: false,
animation: 'fade',
trigger: 'custom',//disable hover
distance: 30,
theme: 'tooltipster-shadow',
trackOrigin: true, // on resize;
//trackTooltip: true,
side: 'bottom',
viewportAware: false,
//trigger: 'click',
contentAsHTML: true,
content: $(this).data("description")
});
});
}
initTooltipster();
function showMapInfo() {
var dataCountry = $('.country-item.active').data('country');
$('.svg-container .tooltipstered').each(function () {
var countryIdd = $(this).attr("id");
console.log(countryIdd);
if (dataCountry === countryIdd) {
//console.log(true);
$('.svg-container .tooltipstered').removeClass('active');
//console.log($(this));
$(this).addClass('active');
$('.tooltipstered').tooltipster('close');
$('.tooltipstered.active').tooltipster('show');
}
}); // each
}
showMapInfo();
$('.next-prev li').on('click', function () {
if ($(this).hasClass('next')) {
if ($('.country-item.active').next().length === 0) {
$('.country-item.active').removeClass('active');
$('.country-item:first-child').addClass('active');
} else {
$('.country-item.active').next().addClass("active").prev().removeClass('active');
//console.log($('.country-item.active').next());
}
showMapInfo();
} else {
if ($('.country-item.active').prev().length === 0) {
$('.country-item.active').removeClass('active');
$('.country-item:last-child').addClass('active');
} else {
$('.country-item.active').prev().addClass("active").next().removeClass('active');
//console.log($('.country-item.active').prev());
}
showMapInfo();
}
});
});
您只需将选择器和'open'
参数传递给tooltipster
实例:
$('...selector').tooltipster('open')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.