[英]Showing Tooltipster Tip With Both Focus & Hover
We are utilizing the tooltipster plugin to display a tooltip over an info icon. 我们正在利用tooltipster插件在信息图标上显示工具提示。 This works fine on hover.
在悬停时效果很好。 But we also need to have it show if someone tabs to the info icon too.
但是我们还需要让它显示是否有人也点击了信息图标。
I can't seem to find any examples of how to enable the popup on both hover AND focus. 我似乎找不到任何有关如何在悬停和焦点上启用弹出窗口的示例。
This is what existed in this project already: 这是该项目中已经存在的内容:
HTML: HTML:
<a href="#"><span class="tooltip">Some handy tooltip text...</span></a>
Javascript: 使用Javascript:
if ($('.tooltip').length) {
$('.tooltip').tooltipster({
theme: '.tooltipster-shadow',
maxWidth: 220,
interactive: true,
functionReady: function () {
$('html').click(function () {
$.fn.tooltipster('hide');
});
}
});
}
You can use Tooltipster's show method like so: 您可以使用Tooltipster的show方法,如下所示:
$('.tooltip').tooltipster().focus(function() {
$(this).tooltipster('show');
});
http://iamceege.github.io/tooltipster/#advanced http://iamceege.github.io/tooltipster/#advanced
$('.tooltip').tooltipster({
theme: '.tooltipster-shadow',
trigger: 'custom',
maxWidth: 220,
interactive: true,
functionReady: function () {
$('html').click(function () {
$.fn.tooltipster('hide');
});
}.on( 'focus, hover', function() {
$( this ).tooltipster( 'show' );
}).on( 'focusout, mouseout', function() {
$( this ).tooltipster( 'hide' );
})
});
I think you are looking for that : 我认为您正在寻找:
$('.tooltip_hover_n_click').tooltipster({
delay: 100,
trigger: 'custom' // disable all by default
}).mouseover(function(){ // show on hover
$(this).tooltipster('show');
}).blur(function(){ // on click it'll focuses, and will hide only on blur
$(this).tooltipster('hide');
}).mouseout(function(){ // if user doesnt click, will hide on mouseout
if(document.activeElement !== this){
$(this).tooltipster('hide');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.