如何在禁用按钮上显示工具提示？
在禁用按钮上显示工具提示，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：
- HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁用按钮工具提示示例</title>
</head>
<body>
<button id="disabledButton" disabled>点击我</button>
</body>
</html>- CSS代码：
#disabledButton {
position: relative;
cursor: not-allowed;
}
#disabledButton:after {
content: "禁用按钮上的工具提示";
position: absolute;
top: 100%;
left: 0;
padding: 5px;
background-color: #333;
color: #fff;
font-size: 12px;
white-space: nowrap;
display: none;
}
#disabledButton:hover:after {
display: block;
}- JavaScript代码：
document.getElementById("disabledButton").addEventListener("mouseover", function() {
this.setAttribute("title", "禁用按钮上的工具提示");
});这个示例中，我们使用了HTML的disabled属性来禁用按钮，使用CSS的:after伪元素来创建工具提示，并使用JavaScript的mouseover事件来设置工具提示的内容。当鼠标悬停在按钮上时，工具提示将显示在按钮下方。
相关·内容
当我将工具提示放置在按钮上时，它会如预期的那样显示；但是如果单击按钮(由底层控制器禁用)，并且显示工具提示，则工具提示不会隐藏并永远停留在那里。这里有一个复制品：只需将按钮悬停以使工具提示出现，然后单击它。按钮被禁用，工具提示留在
浏览 5提问于2014-04-10得票数 8
回答已采纳
我正在使用ngbTooltip在按钮上显示工具提示。tipContent></ng-template> 然而，当变量disabled为true时，即当按钮被禁用时，工具提示不会在Google Chrome中显示，但在Firefox中可以使用。在stackblitz中重新创建问题
浏览 7提问于2020-04-24得票数 0
回答已采纳
需要在禁用按钮上显示工具提示，并使用dojo隐藏启用按钮上的工具提示。在禁用按钮的一般情况下，
浏览 3提问于2014-06-09得票数 0
我想实现这个特性：
关于工具提示，我只知道如何在用户长期按下小部件以显示工具提示时实现它。在我的示例中，触发工具提示的适当
浏览 2提问于2019-12-16得票数 3
回答已采纳
我让一些人在GridView中禁用GridViewItem并启用GridViewItem。当鼠标指针指向禁用的GridViewItem时，我想显示它的工具提示。但我无法在禁用GridViewItem时显示工具提示。我的代码片段。SelectionMode="Multiple"
浏览 6提问于2019-03-10得票数 0
3回答
在“编辑器”中，当我悬停在工具栏按钮上时，工具提示从左上方飞到放置工具栏按钮的位置。这种奇怪的行为使得这个工具提示非常难看，并且想要禁用它。描述禁用内联工具提示，但我正在寻找禁用主要工具提示的方法。下面图片中的黑色工具条有工具提示，我想<e
浏览 2提问于2016-02-18得票数 7
回答已采纳
4回答
如果winform上有一个禁用的按钮，那么如何在鼠标悬停时显示工具提示，以告知用户禁用该按钮的原因？
浏览 14提问于2009-01-29得票数 38
回答已采纳
我在一个按钮上设置了一个工具提示。当鼠标悬停在按钮上时，工具提示将正确显示。当鼠标离开按钮时，工具提示将正确消失。
单击按钮时，按钮将被禁用，工具提示仍将显示。如何解决此问题，以便在单击/禁用按钮时隐藏工具<em
浏览 4提问于2017-03-22得票数 0
回答已采纳
我想将工具提示放到一个按钮上，以便在WPF中启用和禁用。下面我已经提到了尝试过的代码。但是我尝试过的代码不能解决我的问题。我不知道我是否应该用单独的财产来做这个。
浏览 0提问于2020-07-23得票数 0
回答已采纳
5回答
我正在显示一个按钮列表，其中一些按钮可能已禁用。我需要在禁用的按钮上显示一个工具提示，并解释为什么它被禁用，但我似乎无法在不禁用工具提示的情况下禁用该按钮。有什么简单的方法可以解决这个问题吗？
浏览 1提问于2010-05-26得票数 9
', null)}</button>
这是SFCC (salesforce commerce cloud)项目电子商务站点，在购物车页面中，如果用户没有选择产品大小或数量，该按钮将保持禁用状态目前，我们正在显示来自title属性值的默认工具提示，但是新的要求是，我们需要在单击not悬停时显示相同的消息，因为我们不能向禁用元素添加单击事件，所以我想从(后端)添加一个数据禁用属
浏览 3提问于2020-08-02得票数 0
2回答
如何在样式(或其他方法)中使用属性触发器来更改已由绑定定义了值的属性(例如ToolTip)？Name}" >My Button</Button>
它在工具提示上有一个绑定，用于显示设置为DataContext的类的Name属性。我的问题是，我想在按钮启用时显示名称，但在禁用按钮时显示其他内容。如果我从按钮上移除了工具提示绑定，
浏览 1提问于2009-06-21得票数 4
回答已采纳
我在我的网站上使用Tooltipster工具提示。
我想知道，有没有一种方法可以禁用Tooltipster工具提示，该提示在单击鼠标按钮时显示？比如，假设我有一个表单，Submit按钮上有一个Tooltipster工具提示，当用户将鼠标悬停在submit按钮上时，它会显示出来。现在，我希望当用户单击表单提交按钮时，工具<
浏览 3提问于2013-09-20得票数 5
我想有条件地启用/禁用按钮上的工具提示。我这样做是为了测试禁用状态： uib-tooltip="test" tooltip-is-open="false">但工具提示显示如何禁用工具提示？
谢谢
浏览 26提问于2016-08-01得票数 18
primefaces中是否有可显示禁用commandButton的工具提示的功能。
浏览 0提问于2012-03-26得票数 9
回答已采纳
我正在使用ICEFaces组件，我需要在ice:commandButton上设置工具提示。使用IE开发工具检查，当按钮被禁用时，这
浏览 1提问于2011-05-31得票数 0
回答已采纳
我想要做的是禁用一个togglebuttonbar上按钮的工具提示。有人知道如何访问togglebuttonbar上的按钮来禁用工具提示吗？我不想禁用整个应用程序的所有工具提示(ToolTipManager.enabled= false;)。我已经将togglebuttonbar的工具提示设置为null，但它并没有禁用<
浏览 21提问于2010-06-30得票数 0
3回答
我有一个HTML按钮。我试图根据按钮的"title“属性在它上面呈现一个工具提示，但它没有呈现。主要是因为它被禁用了。
然后，我尝试将按钮包装在span中，并设置span的"title“属性。将鼠标悬停在包裹在范围中的按钮上仍然没有任何效果。工具提示将呈现在跨度中不属于按钮标记的任何其他部分。就像我把一些文本放在跨度和按钮上一样，悬停在文本上会
浏览 0提问于2010-01-28得票数 64
回答已采纳
我有一个按钮，我想显示一个材料工具提示，只有当按钮被禁用。这是按钮： mat-icon-button matTooltip="Do X to create an accountonAddAccountAction()"<mat-icon>Add</mat-icon>
</butto
浏览 13提问于2020-06-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
