如何在禁用按钮上启用 Bootstrap 工具提示?

编程入门 行业动态 更新时间:2024-10-28 02:32:01
本文介绍了如何在禁用按钮上启用 Bootstrap 工具提示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我需要在禁用的按钮上显示工具提示,并在启用的按钮上将其删除.目前,它反向工作.

扭转这种行为的最佳方法是什么?

$('[rel=tooltip]').tooltip();

<script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="maxcdn.bootstrapcdn/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="maxcdn.bootstrapcdn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><小时><button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled

这是一个演示

P.S.:我想保留 disabled 属性.

解决方案

这是一些工作代码:jsfiddle/mihaifm/W7XNU/200/

$('body').tooltip({选择器:'[rel="tooltip"]'});$(".btn").click(function(e) {if (! $(this).hasClass("disabled")){$(".disabled").removeClass("disabled").attr("rel", null);$(this).addClass("disabled").attr("rel", "tooltip");}});

想法是使用 selector 选项将工具提示添加到父元素,然后在启用/禁用按钮时添加/删除 rel 属性.>

I need to display a tooltip on a disabled button and remove it on an enabled button. Currently, it works in reverse.

What is the best way to invert this behaviour?

$('[rel=tooltip]').tooltip();

<script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="maxcdn.bootstrapcdn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button> <button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

Here is a demo

P.S.: I want to keep the disabled attribute.

解决方案

Here is some working code: jsfiddle/mihaifm/W7XNU/200/

$('body').tooltip({ selector: '[rel="tooltip"]' }); $(".btn").click(function(e) { if (! $(this).hasClass("disabled")) { $(".disabled").removeClass("disabled").attr("rel", null); $(this).addClass("disabled").attr("rel", "tooltip"); } });

The idea is to add the tooltip to a parent element with the selector option, and then add/remove the rel attribute when enabling/disabling the button.

更多推荐

如何在禁用按钮上启用 Bootstrap 工具提示?

本文发布于:2023-11-03 16:57:06,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1555622.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:按钮   提示   工具   如何在   Bootstrap

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!