Bootstrap 4工具提示使用标题以外的自定义属性为工具提示提供文本
Bootstrap 4工具提示是一种用于在网页中显示提示信息的功能。除了使用标题外，它还可以使用自定义属性来提供工具提示的文本内容。
工具提示是一种常见的用户界面元素，用于向用户提供额外的信息或解释。Bootstrap 4工具提示通过在HTML元素上添加特定的属性来实现，这些属性包括data-toggle="tooltip"和title。
具体步骤如下：
- 在需要添加工具提示的HTML元素上，添加
data-toggle="tooltip"属性。例如： - 在需要添加工具提示的HTML元素上，添加
data-toggle="tooltip"属性。例如： - 初始化工具提示插件。在JavaScript中，使用
tooltip()方法来初始化工具提示。例如： - 初始化工具提示插件。在JavaScript中，使用
tooltip()方法来初始化工具提示。例如： - 添加CSS样式。Bootstrap 4工具提示需要一些CSS样式来显示和定位工具提示框。确保在页面中引入Bootstrap的CSS文件。
工具提示的优势包括：
- 提供了一种简单易用的方式来向用户展示额外的信息。
- 可以增强用户体验，提供更好的交互性。
- 可以用于解释复杂的功能或操作，帮助用户更好地理解和使用网页。
工具提示的应用场景包括但不限于：
- 在按钮上显示操作的描述或提示。
- 在表单输入框上显示输入要求或格式说明。
- 在图标上显示相关的功能说明。
腾讯云提供了一些相关的产品和服务，可以帮助开发者实现工具提示功能，例如：
- 腾讯云CVM（云服务器）：提供可靠的云服务器，用于部署和运行网页应用。
- 腾讯云CDN（内容分发网络）：加速网页内容的传输，提高用户访问速度。
- 腾讯云COS（对象存储）：用于存储和管理网页中使用的静态资源，如图片、样式表和脚本文件。
以上是关于Bootstrap 4工具提示的完善且全面的答案。
相关·内容
如何使用引导的工具提示将一些文本转换为斜体？
这是段代码..。
在我的例子中，我想将文本“标题”转换为斜体！
谢谢
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcd
浏览 0提问于2016-01-14得票数 3
回答已采纳
如果用户在我的react/react/ bootstrap 4应用程序中选择了不同的语言，我想要更改按钮上引导工具提示的文本(标题)。我已经阅读了，但我不知道如何更改引导工具提示的文本。
我的按钮的title属性被更改，但这不会更改bootstrap 4工具提示的文本。如何更改bootstrap 4工具提示的文本？
浏览 7提问于2018-01-28得票数 1
我试图创建自定义工具提示插件只是为了学习的目的。当我在诸如“工具提示”这样的自定义属性中获取工具提示文本时，每件事情都正常工作，但是在“标题”的情况下，我无法隐藏/禁用浏览器默认的标题工具提示。
HTML：
<p id="p1" title="tooltip 1">Go</a>">
This is a paragraph
</p>
<p id="p2" title="tooltip 2">
This is another paragraph
</
浏览 1提问于2017-01-17得票数 1
回答已采纳
我正在使用twitter bootstrap工具提示功能，它在gsp标题文本中工作得很好。现在我想在id="tooltipcheck“上添加引导工具提示。如果我写数据“{{title=}}”，那么我可以看到工具提示，但是bootstrap工具提示在这里似乎不起作用。是js模板有问题还是有其他问题？
<script id="myTemplate" type="text/x-handlebars-template">
<div class="row">
<div class="span4"
浏览 0提问于2013-08-13得票数 1
1回答
我正试图在我的标题图片的底部有一个图片标题。我找到了下面的代码来编写工具提示，但是它对移动不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-s
浏览 2提问于2017-05-26得票数 0
回答已采纳
5回答
帮助我，因为我是jQuery和web开发的新手。我的要求是椭圆尺寸(.)文本框中的长文本，如果鼠标悬停在文本框上，则在工具提示中显示全文。
为此，我使用了Bootstrap的工具提示。我所做的是：
下载的引导程序js并包含在我的文件中，如下所示：
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
把我的衣服改成这样
<input type="text" name="tooltip" id=&
浏览 2提问于2015-06-18得票数 9
回答已采纳
2回答
使用不是标准的工具提示
、、、
我有MVC5应用程序和bootstrap3，我想使用工具提示，这不是标准，像下面的是简单的一个，我怎么能这样做？
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="some text">Tooltip on left</button>
例如，如何将工具提示背景更改为蓝色，将文本更改为白色？
浏览 4提问于2014-06-10得票数 1
回答已采纳
我使用Twitter Bootstrap包中的工具提示在页面上显示项目信息。有时信息会发生更改，需要在工具提示中进行更新。我只是尝试用新标题重新初始化工具提示：
$('#selector').tooltip({ title: 'new text'});
但是，工具提示的标题不会随着新文本的变化而改变。它保持与初始设置相同。你知道为什么吗?有什么解决办法吗？谢谢!
浏览 4提问于2012-06-27得票数 14
回答已采纳
2回答
我试图得到一个工具提示，它的样式比工具提示通常的纯文本要多。
我看到Twitter引导工具提示是黑色的，白色的文本，有箭头等。
我的工具提示如下：
为了解决这个问题，我已经读过这篇文章，我需要补充如下：
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
我这样做了，但没有效果。
我认为唯一可能影响它的是，这是一个Aurelia应用程序，我是在<template>中这样做的。
还有什么是我可以检查的，看看为
浏览 4提问于2015-12-15得票数 0
回答已采纳
我目前使用下面的函数来创建将使用bootstrap的工具提示插件显示的文本。多行工具提示如何处理br和不处理\n）？我更喜欢我的链接的标题属性中没有任何html。 什么工作 def tooltip(object)
tooltip = ""
object.each do |user|
tooltip += "#{user.identifier}" + "<br>"
end
return tooltip
end
我想要的是 def tooltip(object)
tooltip = ""
浏览 83提问于2018-03-22
回答已采纳
我正在使用Twitter-Bootstrap工具提示，我想知道是否有本地化它们的方法或最佳实践？例如:在配置/区域设置中
我的设置是：
Gemfile
gem 'twitter-bootstrap-rails', '~> 2.1.3'
bootstrap.js.coffee
jQuery ->
$('#plugin_description').tooltip({'trigger':'hover', 'title': 'ToolTip Text'})
工具提示可以很好地
浏览 1提问于2012-10-12得票数 1
我需要为DataGrid (Silverlight4)的列标题添加一个工具提示。我将动态生成列数和列标题文本。
GridColumnCreation(....)
{
IEnumerable allHeaderText = /* Linq query */;
}
如何使用此集合设置工具提示？
浏览 2提问于2011-01-06得票数 9
回答已采纳
5回答
我使用CKEditor和jQuery UI的工具提示插件。发生的事情是，CKEditor将标题属性设置为其iframe元素，jQuery工具提示插件将其转换为工具提示，然后，当您将鼠标悬停在编辑器的任何部分(每次编辑文本时都必须这样做)时，工具提示总是显示出来，上面写着"Rich text editor，elementId“。
即使我将工具提示插件的选择器设置为"*:not(iframe)"，它仍然可以这样做。到目前为止，我找到的不为iframe设置工具提示的唯一方法是从选择器中排除"div“，但是我也丢失了编辑器的粗体/斜体等选项的工具提示。
而且我在CKEd
浏览 7提问于2013-01-28得票数 5
回答已采纳
我不想在标题中再次重复alt文本？有没有什么javascript，jquery，css解决方案可以做到呢？或者任何解决方案，可以禁用显示alt=text和启用title=texr，并作为工具提示？
浏览 1提问于2009-11-15得票数 11
回答已采纳
2回答
我使用这段代码在AngularJS中编写了工具提示。我想改变我的工具提示的背景。我不想要我的工具提示内容的黑色背景。另外，我想改变工具提示的形状。怎么做？我尝试了一些css代码，但没有给出所需的结果。
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
});
.round-button {
display:block;
width:50px;
height:50
浏览 4提问于2016-04-12得票数 0
回答已采纳
1回答
我正在尝试使用ng引导来设置工具提示的全局配置。默认情况下，我希望容器是"body“。我在ng引导页上看到了它所需的代码：
我想我不知道该放哪儿了。我尝试过将它放到app.component.ts文件中，但是它似乎没有做任何事情。
app.component.ts
import { Component } from '@angular/core';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root&
浏览 3提问于2017-06-20得票数 4
回答已采纳
创建了用于显示问题的codesandbox：https://codesandbox.io/s/agitated-https-2xjs2?fontsize=14&hidenavigation=1&theme=dark 当我将鼠标悬停在卡片上时，我想要一个工具提示来显示。我需要从OverlayTrigger向工具提示组件传递一个值。使用以下代码，将鼠标悬停在卡片上时不会显示任何内容： Character.js： import React from 'react'
import { Card, OverlayTrigger } from 'react-boo
浏览 19提问于2020-11-08得票数 0
我的问题是，我的工具提示显示在标题导航栏的下面，但我想让它在工具提示框点击标题时翻转到另一个位置(例如：'left-bottom')。
可以在ng-bootstrap中手动设置工具提示的边界吗？Vanilla Bootstrap api有边界选项，我认为这是为了限制工具提示可以显示的位置，但是ng-bootstrap api没有这个选项。
引导接口：
ng-bootstrap接口：
我的代码如下所示：
<div triggers="{{ triggers }}" placement="{{ placement }}" ngbTooltip=
浏览 13提问于2021-06-11得票数 3
回答已采纳
1回答
我这里有一段代码，当用户将鼠标悬停在td单元格上时，它会显示一个工具提示。
import { DropdownButton, Tooltip } from 'react-bootstrap';
...
$(e.currentTarget).parent().prev().hover(() => {
this.showTooltip(tooltipContent);
});
...
showTooltip(tooltipContent) {
console.log(tooltipContent);
return (
<T
浏览 1提问于2016-10-09得票数 5
1回答
我的页面上显示了一个文本。当鼠标悬停在它上面时，我希望在工具提示中出现一个Amcharts饼图。
我尝试使用Bootstrap工具提示，并在工具提示标题参数中附加了一个id为"chartdiv“的div，然后初始化图表。
此时将显示工具提示，但为空。
有没有办法让饼图显示在工具提示中？
如有任何帮助，我们不胜感激！
浏览 3提问于2018-08-08得票数 0
我遇到了一个HTML/Bootstrap问题。我在Angular Bootstrap (UI Bootstrap)上使用uib-tabset指令显示了一组选项卡。我想要显示一个工具提示，如果该选项卡被禁用，则将鼠标悬停在该选项卡上时会显示该提示。有谁知道怎么做吗？下面是HTML (我真的不确定还能放什么，它很简单)：
<uib-tab disable="isBracketdisabled">
<uib-tab-heading>
I AM A HEADING
</uib-tab-heading>
</uib-
浏览 3提问于2017-04-19得票数 0
Bootstrap的工具提示通常通过元素的title和data-title属性工作。我可以通过data-html="true"属性指定HTML码，例如 <a href="..." data-toggle="tooltip" data-html="true" title="<b>First Line:</b><br>Second Line.">...</a> 它通过工具提示插件渲染得很好： ? 但是当JavaScript被禁用时，问题就出现了；在这
浏览 13提问于2019-09-25得票数 0
回答已采纳
1回答
如何正确配置detailsHeader，使其显示标题文本的工具提示？在每一列中，我都添加了ariaLabel、name、key、fieldName，并在这篇文章中尝试了最上面的答案，但不起作用：
我使用的是"@fluentui/react"："^8.11.1“
浏览 8提问于2021-11-02得票数 0
我正在开发一个Angular 6应用程序，它使用ngx-translate进行本地化，我也在使用Bootstrap 4工具提示，我面临的问题是我无法使用本地化保持Bootstrap工具提示风格。
如果没有本地化，我会这样使用输入：
<input type="text" class="form-control text-truncate" id="position"
placeholder="position" data-title="position" />
这将显示一个非常好的Bootstrap工具提
浏览 0提问于2018-09-27得票数 0
3回答
有没有办法将工具提示添加到非超链接？
即。我想有一个鼠标在工具提示上，当它经过一个文本，我将感谢工具提示的工作示例，这不是基于超链接
谢谢
浏览 0提问于2012-04-03得票数 3
回答已采纳
医生说：
"itemDescription:计算为一个字符串，该字符串将用作要显示的项的说明。“
我不会将任何title属性添加到DOM中的结果选项元素或任何东西中，甚至在将文本字符串设置为其值时也不会这样做(无论是在f:selectItem还是f:selectItems上，都没有单独尝试，在列表项上添加了一个c:forEach，该列表项与标签一起正确显示)。
一些论坛帖子似乎建议人们使用它作为工具提示。
文档并不完全清楚，组件上的itemDescription属性是否意味着被呈现为工具提示/标题？如果不是，那有什么好处呢？
浏览 3提问于2014-08-27得票数 0
我一直在开发一个Visual扩展，作为as 2008/2010的一个外接程序。现在的新版本将只作为VS2010的VSIX包完成(因为它无论如何必须是.NET 4)，而且我在UI处理方面遇到了一些问题(我认为非常简单)。
扩展主要由一个工具栏和一些按钮组成，这些按钮可以启动各种操作、表单等，还有一些只用作标签来显示某些状态信息。“标签”按钮本身只显示非常简短的信息，而工具提示提供了更多的细节。
虽然我并不认为所有的外接程序都很优雅，但是做这样的事情非常简单(尽管我的方法可能有点业余)。当将命令添加到工具栏时，我会将"label“按钮”保存“在特定的局部变量中，允许我稍后随意设置标题和工具
浏览 1提问于2010-10-25得票数 5
回答已采纳
我使用ng-bootstrap 3.0.0和angular 4来显示悬停在图标上的bootstrap工具提示。但是由于未知的原因，工具提示不会在图标悬停时显示。这是我的代码：
<div class="col-md-1" style="margin-left:20px;" placement="bottom" ngbTooltip="Import">
<input type="file" id="fileLoader" name="files" style=&
浏览 4提问于2018-08-23得票数 1
回答已采纳
我不确定我是否有这个头衔，如果有人能推荐一个更好的标题，我会很乐意改变它。
我有一个网站，显示的产品清单，您可以购买，与一个快速的“添加到愿望列表”按钮。当您在按钮上悬停时，工具提示会说“添加到愿望列表”，当您单击该按钮时，项目将被添加到愿望列表中。问题是，既然项目在愿望列表篮子中，悬停在按钮上应该说“从愿望列表中删除”，但它仍然写着“添加到篮子”。我在努力更新这个。
我使用data属性显示图标的代码如下所示。
<div class="wishlist-status js-wishlist-icon" data-tippy-content="@Html.Tran
浏览 6提问于2021-01-15得票数 1
使用ag-grid和ng7，我创建了一个自定义工具提示组件，将其绑定到列定义tooltipComponent，以及headertooltip和headername。当我将鼠标悬停在标题上时，将调用来自agInit的console.log，但是不会呈现该模板
在的基础上，有一个名为getGui的方法，它也可以呈现html。我也试过了，当鼠标悬停在标题上时没有显示。
<ag-grid-angular
#agGrid
[frameworkComponents]="frameworkComponents"
...
><
浏览 4提问于2019-08-14得票数 2
我是新来的天使。尝试使用引导工具提示实现表单验证。如果输入字段无效并获得焦点，带有工具提示的文本将出现。验证工作正常，即如果输入字段有无效的值，但是工具提示文本没有显示，则输入字段会变红。以下是html：
<form role="form" name="form" ng-controller="registerController">
<div class="col-sm-12">
<div class="form-group" ng-class
浏览 5提问于2016-03-12得票数 0
回答已采纳
2回答
我写了一个小的C#程序，它不时地在气球提示中显示文本。当文本是英文时，没有问题:所有内容都是左对齐的，并且是可读的，但有时我有一些希伯来语文本，RTL语言的左对齐变得很奇怪。我想知道有没有办法右对齐希伯来语文本？
Google向我指出了可以帮助我更改气球颜色和字体的文章，但没有一篇文章有对齐的论点。
这有可能吗？
任何帮助都将被拨付。约翰
浏览 3提问于2010-05-14得票数 2
1回答
我正在尝试为一个闪亮的应用程序添加工具提示/弹出窗口，并使用这个问题作为示例Add Tooltip to Tabs in Shiny 问题是我不能使用HTML()来修改标题。我需要有一个换行<br>之间的行，和文本的粗体，颜色。通常情况下，它适用于我使用的所有标题，除了这一个。 有什么想法吗？ library(shiny)
shinyApp(
ui =
navbarPage(tabsetPanel(
tabPanel(span("Tab 1", title = HTML(
"<span style=
浏览 41提问于2020-11-22得票数 1
1回答
我想在标签中用粗体显示一些标题文本
我尝试了下面的代码，但它对我不起作用。
<a href="http://google.com" title="This is <b>Bold Title</b>">Link</a>
有没有办法用粗体显示一些标题文本？
浏览 2提问于2017-05-29得票数 1
1回答
我的问题很简单。下面是简单的代码，其中我只有一个标题跨度。我想知道在哪里可以找到事件默认工具提示显示。
<span title="some stubborn tooltip">text</span>
注意:这与Jquery或CSS无关，我在这里讨论的是纯JavaScript。
提前感谢
浏览 1提问于2016-12-02得票数 0
回答已采纳
向所有人问候，
请帮助我如何重新设置datagridview行标题的工具提示文本，当我加载datatable并设置datagridview行的每个工具提示时，当我将鼠标指针移动到行标题时，它会正确显示，但当我单击列以升序或降序排序数据时，行标题的工具提示是否被删除？当我单击datagridview的列标题时，如何设置它或避免它...提前感谢！
浏览 1提问于2016-03-08得票数 1
我有一个应用程序，我正在使用Bootstrap 4和工具提示。我想要一个接一个地切换工具提示，并仅在单击时显示它们。我可以使用以下命令来完成此操作：
<input type="text" id="name" class="form-control" autocomplete="off"
data-toggle="tooltip" data-placement="bottom" title="Write name here.">
我使用下面的javascript单独显
浏览 18提问于2019-11-15得票数 2
回答已采纳
7回答
无法更改引导工具提示标题
、、、
我已经查看过关于堆栈溢出的几个帖子，询问了几乎完全相同的问题，但我在这些问题上的发现都没有帮助。我对JQuery和Bootstrap非常陌生，所以也许我只是错过了一些非常简单的东西。
我希望能够在第一次初始化之后(最好是在初始化后多次)更改不同元素上的工具提示的标题。我正在处理的问题的一个简化版本：
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapc
浏览 7提问于2015-12-31得票数 10
回答已采纳
我有ASP.NET下拉列表，它太小了，无法显示用户选择的完整文本。因此，我决定在工具提示中显示选定的文本。
ApplyToDropDown.Attributes.Add("onMouseOver", "ShowApplyToText()");
function ShowApplyToText()
{
var ApplyToDropDown = document.getElementById("ApplyToDropDown");
if(ApplyToDropDown != null)
ApplyToDrop
浏览 1提问于2010-08-06得票数 1
回答已采纳
1回答
有没有人知道是否可以在bootstrap的工具提示中添加图标？我在bootstrap工具提示上找到的唯一信息是如何自定义它的颜色，或者如何用animate.css在它上面添加一些动画，可以做到吗？
浏览 3提问于2016-09-10得票数 0
回答已采纳
我可以看到，您可以使用Django引导工具包在Django中生成引导表单。这看起来挺酷的。但是我有两个问题，
django-自助工具包也可以用于模型形式吗？
如果我有一个用django-bootstrap-工具箱创建的大型表单，那么将表单传递给模板以便其自动呈现的最佳方法是什么，同时允许我在表单中放置部分文本(即整个表单的标题)？
谢谢,
浏览 2提问于2013-06-19得票数 0
我在.net 4.5中使用C++/CLI。我尝试在DataGridViewCell上显示工具提示，但使用标题。我可以轻松地设置文本(属性ToolTipText)，但是我找不到添加标题的方法。在类ToolTip中有一个属性ToolTipTitle，但它既不能从DataGridViewCell对象访问，也不能通过DataGridView使用的底层ToolTip使用。我试着在CellValueNeeded和CellToolTipTextNeeded事件中设置它，但是没有.
我的下一次尝试是直接将ToolTip设置为DataGridViewCell，但我很快发现这样的单元格不是从Control继承的.
浏览 2提问于2016-05-03得票数 0
回答已采纳
当你将鼠标移到带有标题的链接上时，一段时间后，它会将标题显示为提示。是否可以删除此延迟或更改它，以便更快地显示提示？
浏览 4提问于2010-10-19得票数 5
回答已采纳
我正在尝试复制Google Graph API使用的默认工具提示样式：
特别是上面看到的一些文本的粗体。一旦我添加了我自己的工具提示，我就不能再像在默认视图中那样加粗文本的部分。
标签tooltip.textStyle只提供了一个选项来改变显示的整个文本{color: <string>, fontName: <string>, fontSize: <number>}的颜色。
有什么想法吗？
浏览 1提问于2013-02-08得票数 4
回答已采纳
在我的标记中，我使用的是HTML title attributes，它是由各种ASP.NET控件的Tooltip属性设置的，比如asp:Label。这些标题的内容来自数据库，我使用数据绑定语法，例如：
<asp:Label ID="PersonLabel" runat="server"
Text='<%# HttpUtility.HtmlEncode(Eval("PersonShortName")) %>'
ToolTip='<%# HttpUtility.HtmlEncode(E
浏览 5提问于2010-06-27得票数 3
回答已采纳
这就是我的问题，当您为数据标签设置useHTML: true时，标签文本似乎将覆盖工具提示背景。
您可以在这个简单的小提琴中看到它的行为：
尝试将鼠标放在工具条上显示工具提示，您将在工具提示背景中看到数据标签的文本。
可以在数据标签上设置z索引吗？
我曾尝试在工具提示定义中添加以下内容，但没有成功：
style : {
color: 'black',
'z-index': 0
},
我还尝试为数据标签和工具提示设置span类，然后将z-index添加到这些类的css属性中，但仍然不起作用。
编辑:当我还在寻找问题的解决方案时，有人能告诉我
浏览 0提问于2012-12-06得票数 7
回答已采纳
当单击链接时，我试图使用javascript/jquery更改超链接标题。HTML
<a
href="javascript:addRss('234');"
class="btn btn-success"
title="Add content to Personal RSS"
id="addRssbtn"
data-toggle="tooltip" >
<i class=
浏览 0提问于2014-04-29得票数 4
回答已采纳
我这里有个奇怪的情况我需要帮助。
我使用TableViewer创建了一个相当简单的JFace表。当您不做任何其他操作时，您可以看到以下行为:当单元格的文本太大时，显示完整文本的工具提示将在短暂等待后出现。这是正常的行为，我猜是本机控件绘制了这些工具提示。
现在，我添加了自己的自定义工具提示，使用
ColumnViewerToolTipSupport.enableFor( tableViewer, ToolTip.NO_RECREATE );
以及使用标签提供者的getToolTipText()方法传递(不同的)文本。
这样就行了--差不多。我有一个问题:有时(不是所有的时候！)首先，本机工具提
浏览 2提问于2013-01-11得票数 4
回答已采纳
我有一个要求，把一个工具提示后的内容。我面临的问题是如何使其具有响应性，因为当内容呈现在两行时，工具提示组件仍然呈现在第一行。这是我尝试过的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1
浏览 1提问于2015-09-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
