简体   繁体   English

如何使用引导程序和fontawesome将弹出窗口设置为单击而不是悬停?

[英]How do I set my popover to click instead of hover using bootstrap and fontawesome?

I have tried focus and manual, but those does not seem to work. 我已经尝试过聚焦和手动,但是这些似乎不起作用。 Any help on this? 有什么帮助吗?

Script: 脚本:

<script>$(document).ready(function() {
$("i.fa").popover({'trigger':'hover'});

HTML: HTML:

<i rel="popover" data-content="hey" class="fa fa-share-alt fa-lg" aria-hidden="true"></i>

CSS: CSS:

[rel="popover"]{
        cursor: pointer;
        display:inline-block; /* chrome-fix */
    }
i.fa {
   display: inline-block;
}

Try Something Like this. 尝试这样的事情。 Is this what you want? 这是你想要的吗?

JS JS

$(document).ready(function() {
$("i.fa").on('click',function(){
    $(this).popover().toggleClass('show');
});;
});

Working Fiddle 工作小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击并悬停Bootstrap 3 Popover - Bootstrap 3 Popover on click AND hover 在悬停时出现Bootstrap Popover / Disappear而不是Click - Make Bootstrap Popover Appear/Disappear on Hover instead of Click Bootstrap Popover和Modal(悬停并单击) - Bootstrap Popover AND a Modal (hover and click) 如何防止我的触摸设备执行:: hover而不是单击功能? - How do I prevent my a touch device from executing an ::hover instead of a click function? Bootstrap 3 Popover:在悬停和点击时显示,也就是说。固定一个弹出窗口 - Bootstrap 3 Popover: display on hover AND on click, aka. Pin a Popover 如何使 bootstrap 3 Popover 处于悬停状态和可点击链接 - How to make bootstrap 3 Popover to be On Hover and Clickable Link Bootstrap popover的复制元素而不是移动它们吗? (点击处理程序不工作..) - Do Bootstrap popover's copy elements instead of moving them? (click handlers not working..) 如何使隐藏的HTML仅显示在单击时的弹出窗口中,而不显示在页面的其他位置? - How do I get hidden HTML to appear only in my popover on click, not elsewhere on the page? 输入上的Bootstrap Popover:悬停 - Bootstrap Popover on Input : hover 表行悬停的Bootstrap弹出窗口:无法单击popover内的链接 - Bootstrap popovers for table row hover: Not possible to click link inside popover
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM