在引导工具提示中使用style='‘
在引导工具提示中使用style=''是一种在HTML中设置元素样式的方法。style属性可以用于为元素指定CSS样式，包括颜色、字体、大小、边框等。通过在style属性中设置CSS属性和值，可以自定义工具提示的外观和布局。
引导工具提示是一种常见的用户界面元素，用于向用户提供关于特定元素或操作的信息。它通常以文本或图标的形式出现，并在用户将鼠标悬停在元素上时显示。引导工具提示可以提供额外的说明、指导或警告，帮助用户更好地理解和使用界面。
使用style=''可以通过直接在HTML标签中设置样式来自定义工具提示的外观。例如，可以设置工具提示的背景颜色、文本颜色、边框样式等。以下是一个示例：
<span style='background-color: #F5F5F5; color: #333; border: 1px solid #CCC;'>这是一个工具提示</span>
在上述示例中，style=''用于设置工具提示的样式。background-color属性设置背景颜色为#F5F5F5，color属性设置文本颜色为#333，border属性设置边框样式为1像素宽的实线边框，颜色为#CCC。
引导工具提示的样式可以根据具体的设计需求进行自定义。可以使用CSS属性和值来调整工具提示的字体、大小、对齐方式、阴影效果等。通过合理运用样式，可以使工具提示更加美观、易读，并与整体界面风格保持一致。
腾讯云提供了丰富的云计算产品和服务，其中包括与工具提示相关的产品。具体推荐的产品和产品介绍链接地址可以在腾讯云官方网站上查找。
相关·内容
所以，我正在经历的一个问题就是让我发疯。一旦我在标记上启用了引导工具提示，我就不会触发自定义JavaScript。如果我删除从标记中触发工具提示的引导代码，则所有操作都正常。
工作示例(删除：数据切换=“工具提示”数据-放置=“左”“title=”父标题文本。“及其将工作)：
<li>
<a class="toggle-data-options" data-toggle="tooltip" data-placement="left" title="Parent Title Text.">Parent
浏览 2提问于2015-02-16得票数 0
回答已采纳
1回答
我有JavaScript的这一部分(jQuery代码)
instance.on(dragLinks, "click", function(e) {
var s = instance.toggleDraggable(this.getAttribute("rel"));
this.innerHTML = (s ? '<a href="#" class="cmdLink drag" style="margin-right: 3px;">
浏览 2提问于2014-11-16得票数 0
回答已采纳
2回答
我正在尝试在我的应用程序中使用引导工具提示。工具提示来了，但它缺少它的CSS。它位于左侧，没有格式化。
<a href="#" data-toggle="tooltip" title="first tooltip" id="example" data-placement="top">Hover over me</a>
<script>
$(function () {
$("#example").tooltip();
浏览 3提问于2014-01-21得票数 0
回答已采纳
5回答
我有一个带有多个引导工具提示的$("#settings") div附加到子元素。
例如,
<div id="settings" style="display: flex;">
<tbody>
<tr>
<td width="25%" class="left Special" style="font-size:150%">Content:</td>
<td width="5%">
浏览 2提问于2015-01-29得票数 28
回答已采纳
1回答
IE11怪异--带有标题属性的选项只显示在所选选项下面的提示？在这个例子中，悬停在选项b和c上，提示显示，但不显示a。选择c和b停止显示提示？
<select name="sel">
<option value=""></option>
<option title="already assigned" value="a" style="background-color:gray;">a</option>
<option tit
浏览 1提问于2015-11-06得票数 2
回答已采纳
2回答
在我的html中，我得到了带有以下代码的引导符号：
<span class="glyphicon glyphicon-copy" style="cursor:pointer;font-size:20px;">
</span>
是否可以在悬停上显示一些文本，就像使用img标记时一样。尝试添加alt属性，但没有工作。也许这里有一些花招(工具提示)或者类似的味道？引导-3是使用。
谢谢。
浏览 0提问于2018-08-21得票数 2
回答已采纳
对于我的第一个JavaScript应用程序，我正在构建一个基于小部件的设计器，并使用各种基于SVG的小部件，这些小部件包含在主HTML中，并带有对象标记。当用户单击小部件对象时，我试图将引导工具提示关联起来，但是在其他非对象HTML元素上使用工具提示时，我会遇到一些奇怪的错误。
对象标记吞食鼠标事件时，不可能通过悬停触发工具提示，而我所能得到的唯一组合显示工具提示是以下代码(其他什么都不起作用，引导程序抱怨)：
document.getElementById(widgetName).setAttribute("title", param0);
setTimeout(functi
浏览 1提问于2013-06-16得票数 0
回答已采纳
3回答
是否可以更改工具提示的标准位置？
在我的例子中，当使用“底部”时，我希望工具提示在激活toolip的区域内稍微高一点。
我搜索并没有在引导或引导模板中找到设置这个值的部分。
我想我必须使用$tooltipProvider来改变行为。
请查看我的plunkr：，如您所见，工具提示出现在错误的位置。
浏览 0提问于2014-02-28得票数 3
回答已采纳
我需要引导中的工具提示来显示从左到右和从右到左语言的混合；其中的主要方向应该是从右到左。例如，工具提示内容可以是"كلمة1 Word2 كلمة3 Word4 كلمة5"，当显示在屏幕上时，单词应该从右到左显示如下:كلمة1，然后是Word2，然后是كلمة3等等。
我尝试了以下几点：
工具提示为纯文本。通过data-html="true"启用html工具提示，工具提示标题为：
<div style='justify-content:right; text-align:right; direction:rtl;'><p
浏览 6提问于2020-12-26得票数 0
1回答
工具提示:不出现或不消失
、、、
我一直在努力使引导工具提示工作。下面是Rails 5.2中的代码。
在版本1中，当按钮被禁用时，工具提示不起作用。但是，如果我将禁用的按钮包装在一个span中，工具提示就会出现在悬停状态下，但是当光标移动时，它会断断续续地消失，但并不总是这样。在大多数情况下，情况并非如此。
请帮帮忙，我已经忙了一整天了。
这是一个JS Fiddle。
JS
$('[data-toggle="tool-tip"]').tooltip();
第1版：
tag.button id: "save-search-btn-disabled",
浏览 0提问于2019-07-24得票数 0
回答已采纳
4回答
我有一个简单的laravel应用程序，我喜欢使用引导工具提示。
表：
<table id="tableSequence" class="table" style="font-size: 12px">
<tr style="font-weight: 600">
<td data-toggle="tooltip" data-placement="top"
浏览 0提问于2018-01-30得票数 3
回答已采纳
1回答
我试图在工具提示中实现一个表单，这个表单是动态插入的。表单在提交时调用人工控制器中的函数，输入字段用作用域模型映射。但是问题是，我使用的是引导工具提示，它在控制器范围之外创建工具提示。
浏览 4提问于2014-03-23得票数 1
回答已采纳
1回答
组件I中的cli和引导程序使用引导工具提示，并注意必须使用jQuery初始化工具提示：
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
我应该在angular.cli生成的角应用程序中添加这个，在component.html还是index.html中呢？
浏览 1提问于2018-07-02得票数 0
回答已采纳
这是一个很难用小提琴复制的问题。我有一个经典的引导4页，但我只能获得工具提示显示，如果我把HTML数据-属性手动。
使用javascript似乎不起作用-更重要的是，使用javascript在任何元素上创建.tooltip (数据切换=“工具提示”甚至类或元素也不起作用)。这是我在页面下面使用的函数：
$(function() {
$('[data-toggle="tooltip"]').tooltip({
container: 'body',
placement: 'bottom',
浏览 3提问于2017-08-04得票数 1
回答已采纳
1回答
我使用和angularJs来显示工具提示。
我使用下面的代码来显示工具提示：
<div class="input-group">
<input valid-number ng-model="gotoPageInput" ng-class="{notValidPageNumber: gotoPageInput > totalPage || gotoPageInput<1}" ng-keyup="gotoPage($event,(gotoPageInput>=1 && gotoPage
浏览 4提问于2014-07-30得票数 1
回答已采纳
3回答
在“引导文档”页面中，工具提示具有以下签名：
<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>
在这个场景中，“数据切换”属性是做什么的？
我知道它对标签很有用，但我看不出它能给工具提示带来什么用处。
克里斯,
工具提示必须显式初始化，如下所示：
$(document).ready(function(){
$(".link").tooltip();
});
假设"a“标记有一个”链接“类。“数
浏览 7提问于2013-06-22得票数 12
回答已采纳
好的，所以我的javascript绝对不是重点，我真的被困在将工具提示集成到我的rails应用程序中。我已经完成了引导我用任何可能的方式做的每一件事，而且它仍然不起作用.
我所取得的唯一进展是，当我悬停在某物上时，我看到的文本应该是这样的工具提示(您看不到鼠标tho)：
此外，当我插入引导程序说会激活所有地方的工具提示到我的布局application.html.erb脚本的代码时，如下所示
<html>
<head>
<meta name="viewport" content="width=device-width, in
浏览 4提问于2020-12-18得票数 1
回答已采纳
我被要求将Drupal 7引导主题中的工具提示样式化。除了在web开发工具中对其进行硬编码之外，我不知道如何做到这一点。Drupal 7中是否有为特定图像或文本打开工具提示的设置？
浏览 0提问于2018-09-19得票数 -1
我已经用引导包来响应项目了。
// npm install bootstrap@next
// npm install bootstrap-icons
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-icons/font/bootstrap-icons.css'
那么我就有了工具提示元素
<i className="bi bi-align-center&#
浏览 14提问于2021-02-26得票数 5
回答已采纳
我使用引导ToolTip来显示只有当按钮被点击时，Vue组件内的通知。但是，工具提示在悬停时仍然显示，这是意外的。我试图在vue组件中使用jQuery来实现结果，但失败了。我可以问一问如何显示引导工具提示只点击？
const linkButton = {
props: ["url"],
data() {
return {
toolTipTitle: "Link Copied",
currentUrl: this.url,
};
},
methods: {
copy: function () {
浏览 2提问于2021-08-20得票数 1
回答已采纳
1回答
我正在尝试在我的webapp中实现引导4中的工具提示，根据引导文档，我应该用下面的代码初始化工具提示
$(function () { $('[data-toggle="tooltip"]').tooltip() }) (以app.component.ts完成)
同样在angular.json中，应该把popper.min.js放在bootstrap.min.js之前(完成)
显然，我已经安装了npm引导程序和jquery，并在另一篇文章中阅读了它们在app.component.ts中进行的两个导入。
import 'bootstrap' a
浏览 3提问于2020-08-13得票数 1
我有以下简单的标记，当鼠标悬停在主体中的按钮上时，它会显示一个彩色的引导工具提示。工具提示文本目前被硬编码到jquery函数中。我希望将工具提示文本从按钮标记传递给jquery函数。该怎么做呢？(这最终将是asp.net标记)
<html>
<title>toolTips</title>
<head>
<script type="text/javascript" src="jqueryScripts\jquery-2.1.0.js"></script>
<scrip
浏览 13提问于2016-08-13得票数 2
回答已采纳
2回答
我对javascript很陌生，需要你的帮助。当我的PJAX页面第一次加载时，我的工具提示起作用了：
$(document).ready(function() {
$(document).pjax('a', '#main', {cache: false});
$('[data-toggle="tooltip"]').tooltip();
}
除非我做以下事情，否则它们就会被卡住：
$(document).on('pjax:start', function(event) {
$('[data-toggle=&
浏览 7提问于2017-11-08得票数 5
回答已采纳
11回答
为了使引导程序显示工具提示函数，我遵循了关于的，并声明了我的属性和属性。当我悬停在文本上时，数据Some tooltip text!只显示alt=""函数，但不像他们的文档中提到的引导带那样具有样式。
解决此问题所采取的步骤：
包括来自外部tooltip.js的
激活工具提示抛出<Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
添加 (我知道不是苗圃)
检查页面是否正在加载
浏览 1提问于2014-08-05得票数 24
回答已采纳
1回答
我正在尝试将引导工具提示添加到列表上的一些图标，但工具提示被行高部分隐藏：
我需要在下面的代码中添加什么样式才能让工具提示悬停在顶部？
<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
<div class="flex">
<div style="margin-right:auto;">
<span class="h4&
浏览 3提问于2018-05-02得票数 5
1回答
如何指定twitter引导工具提示的左边距或位置？现在，我拥有的工具提示被分配到页面最左边的链接，而工具提示的一半是不可见的(显示在屏幕可见区域之外)。
我还对引导css代码做了以下更改，使文本出现在一行上而不是包装上。
我很想把工具提示移到右边，所以文字是可见的。
.tooltip-inner {
max-width: 200px;
.tooltip-inner {
width: auto;
浏览 0提问于2014-01-02得票数 1
回答已采纳
在我的AngualrJS应用程序中，我们使用了角ui引导工具提示。
我有一个工具提示，需要容纳长文本。所以问题的答案告诉我如何使工具提示变得更宽..。
..。但是，如果我不想使所有工具提示都更宽，只想一个特定的工具提示呢？
(注: AngularJS 1.2.24，可用jQuery .但我更希望能够将一种样式应用于单个工具提示，而不是变得更加复杂)
浏览 3提问于2014-11-14得票数 12
回答已采纳
3回答
我试图在twitter引导工具提示中显示一些长文本。正如你在下面的图片中所看到的，事情并没有那么糟糕。是否有人对溢出引导工具提示的文本进行了简单的修复？
编辑(添加请求的代码)：
在我的控制器里：
<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " +
((blTruncated) ? "class='auto-toolti
浏览 3提问于2013-08-29得票数 53
回答已采纳
我试图显示一个引导工具提示悬停在图像上。我在工具提示中有一条文字，我需要让它大胆一些。
我从上面提到的来源试过这个，但是我没有发挥作用。
<button class="infoTipsBox" type ="button" data-toggle="tooltip" data-placement="right"data-original-title='<b>big tooltip</b>'>
</button>
联署材料：
$(function (
浏览 3提问于2015-06-25得票数 6
回答已采纳
1回答
我刚刚将Firefox从48.0升级到了48.0.1，现在我看到了一个引导工具提示的问题。查看Firebug中的HTML，火狐似乎在页面底部添加了一个新的<div>，而该页面不在.jsp中：
<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
<div class="tooltip-arrow&#
浏览 5提问于2016-08-23得票数 0
回答已采纳
4回答
我有一个图像地图，我想使用内置工具提示提供的引导，当用户盘旋在该图像的特定部分。
我遇到的问题是，工具提示没有出现在正确的位置。现在，它显示在图像的左上角为图像地图的所有区域。
如何将工具提示移动到它们各自的区域下，而不必单独地重新定位每个工具提示？它应该自动在定义的rec范围内。
下面是我使用的地图代码：
<img id="Image-Maps-Com-process-map" src="images/osh drawing.png" border="0" width="600" height="600"
浏览 0提问于2015-05-08得票数 7
回答已采纳
1回答
我使用角2和引导带3 。我有一个边栏的布局和主要内容屏幕。在侧栏中，用户可以更改内容中某项的工具提示文本。
不过，我开了个玩笑，因为工具提示文本没有更新。因此，通过@Input()将一个对象通过工具提示文本传递到“我的内容”面板。然后是通过[attr.title]=panel.tooltiptext绑定数据。
现在，如果您更新工具提示文本，然后将鼠标悬停在文本上，您会看到工具提示文本没有被更新，但是一直在徘徊，您将看到带有正确文本的vanilla标题弹出。
实例
main.component.ts -这就像我的侧栏，它在一个比内容面板更高的层次上。
@Component({
selecto
浏览 3提问于2017-01-06得票数 4
回答已采纳
1回答
引导工具提示仍然卡住
、、、、
我正在使用jquery动态创建div，其中包含add & close按钮。我正在使用引导工具提示添加和关闭按钮。我面临的问题是第一个add按钮的工具提示即使在鼠标悬停其他add按钮时也不会隐藏。第一个添加按钮的工具提示保持原样。(请参考屏幕截图)任何关于如何隐藏它的想法。
我使用jquery克隆方法创建动态div。
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().ap
浏览 2提问于2016-12-19得票数 1
回答已采纳
2回答
我试图展示我的工具提示，但它不起作用。我试过什么
<a href="javascript:void(0);" data-toggle="tooltip">Hyperlink Text</a>
JS
$(document).ready(function() {
//$("body").tooltip({ selector: '[data-toggle=tooltip]' });
$('[data-toggle=tooltip]').tooltip({
titl
浏览 1提问于2016-11-30得票数 0
回答已采纳
1回答
因此，我想得到我的表工具提示与我的其他引导带5工具提示。
常规工具提示工作：
let myToolTip = function(cell){
let name = cell.getRow().getData().name
let supplier = cell.getRow().getData().supplier
return "Name: " + name + "\nSupplier: " + supplier
}
但是，它们处于浏览器默认状态。我希望它看起来更漂亮一些，并与网站上的其他工具提示保持一致。
我在表中尝试过一个行格式化程
浏览 4提问于2022-04-05得票数 1
回答已采纳
我对Vue很陌生，我不经常使用Bootstrap，所以请原谅我的新手问题，我正在尝试创建一个Vue工具提示组件，我创建一个组件是为了按照我想要的方式使用css，但是，我遇到了一些可访问性问题，所以我决定使用BootstrapVue工具提示，但是我不知道如何用Bootstrap创建这个组件。这基本上是我使用css的Tooltip.vue组件：
<template>
<div :class="`tooltip ${position}`">
<slot></slot>
<span cla
浏览 3提问于2020-08-05得票数 0
回答已采纳
1回答
我目前正在一个GWT项目中工作，并且希望在一个非常特殊的情况下使用引导工具提示：
是关于什么的：
程序的一部分使用户能够输入一个界面。此界面包含文本框，他可以在其中输入文本。保存此文本后，可以从程序的另一页查看该文本。
什么是重要的：用户输入的文本可以是纯文本，也可以是HTML，然后进行解释。因此，如果用户希望显示HTML列表，而不是执行以下操作
第一项
第二项
第三项
他可以打字
<ul><li>first item</li><li>second item</li><li>third item<
浏览 1提问于2017-05-14得票数 1
回答已采纳
1回答
如何在显示前改变引导方式？
、、、、
我一直试图操纵引导工具提示的定位，但没有成功。
尝试#1
stuff.tooltip({
container: 'body',
placement: function(tip, el) {
// played with tip, but it still add style: top, left at the end...
}
});
尝试#2
stuff.tooltip({
container: 'body',
placement: 'top'
}).on("show.bs.too
浏览 2提问于2015-01-27得票数 1
回答已采纳
我太沮丧了，我不能解决这个简单的问题。如何以编程方式设置/主动引导工具提示？
例如，我们在页面：，让我们打开铬控制台，让工具提示在左上角的“home”链接上动态工作。
var home = $($('.navbar li a')[0]);// select that home link
home.tooltip({title:'wthhhh'}); // set the default title
home.tooltip('show');
第三步不会弹出工具提示。
有什么帮助吗？
编辑:我知道引导有一个重大的更新，但我相信这是无关的。工具提示似
浏览 3提问于2013-07-31得票数 0
回答已采纳
问题：希望显示指向左侧的元素(referenceEl)的工具提示。referenceEl位于有限宽度(60 is )的容器内，并应用了overflow: hidden css支持。工具提示是在其引用元素之后追加的，因此它们在DOM中共享相同的容器。此结果工具提示部分显示。
引导4工具提示api提供了一个container选项，可以将'body'指定为附加点：的替代容器。
如何在react material-ui@beta中实现此功能？
使用的material-ui版本：1.0.0-beta.31
工具提示参考：
工具提示演示页面：
引导工具提示实现部分：
mui工具提
浏览 0提问于2018-02-04得票数 5
回答已采纳
4回答
我使用引导3作为我的项目布局。此外，我还需要为页面的部分内容编写jquery.ui javascript文件。问题是引导和jquery都有tooltip函数，我想使用引导工具提示，但是jquery工具提示出现了。有任何方法可以禁用jquery工具提示而不影响其他jquery函数吗？
浏览 5提问于2014-12-27得票数 7
回答已采纳
我试图显示引导工具提示在格格单元格悬停。问题是，当工具提示的一部分位于下一列单元格后面时，它会部分显示出来。我试着为工具提示设置z索引。但还是没能成功。帮帮忙吧。
浏览 8提问于2017-09-01得票数 5
回答已采纳
1回答
在我的vue项目中使用了引导-sass，但是工具提示不起作用。下面是我的代码：
<span class="fa fa-fast-backward page-item-button" data-toggle="tooltip" data-original-title="First Page"></span>
根据引导文档，我们必须在使用之前初始化工具提示。因此，我只是在我的main.js中添加了这段代码，它运行得很好。
// Initialize all tooltips of bootstrap.
$(function (
浏览 0提问于2018-01-04得票数 0
回答已采纳
1回答
我试图在引导程序中添加tootl技巧，但浏览器似乎有问题。当我打开页面的边缘tooltip=“底部”不能正常工作。但我把它的工作做得很好。但有一件事，我观察到，没有对齐，右或左沿按钮选项的工具提示。请知道这件事吗？？这是我的密码
<div class="col-xs-12 col-sm-2">
<p style="padding:40px;"></p>
<a data-toggle="tooltip" title=
浏览 4提问于2016-05-07得票数 0
回答已采纳
2回答
最近，当我试图在title属性中添加一些html代码时，我遇到了引导3工具提示的问题。它向我展示了简单的html标签代码。
这就是问题所在
浏览 8提问于2017-04-07得票数 1
回答已采纳
这样，我就可以从我的验证函数中显示引导工具提示。
var options = { html: true, placement: 'bottom', title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' };
$(inputElement).addClass('validation-error');
inputE
浏览 0提问于2016-01-18得票数 14
1回答
我们有一个例子，我们正在填充一个包含一些标签的iframe。标签是一个正方形，当你将它悬停时，你会得到一个工具提示。iframe加载在其父文件中。
问题是，在左侧和右侧，工具提示部分位于其父项下。我们正在使用Twitter引导程序。解决这个问题的最好方法是什么？工具提示的高倍化是可能的，但是当工具提示部分在其父项下时，现在如何才能这样做。iframe中的标记列表不是静态的，可以动态增长。我也不想在iframe本身中添加更多的填充。
下面请看我的专业绘画技巧。
浏览 4提问于2015-10-16得票数 1
回答已采纳
1回答
我有一些问题，在一个花纹条形图，我想应用一个引导工具提示。
我构造了一个最小的工作示例
问题在于当工具提示悬停时，不调整值。
我的做法如下：
在悬停一个项目时，将框移动到项目的位置。
使用引导工具提示方法在该框上创建工具提示
一旦移动，摧毁工具提示
我想我一定是做错了什么，但我似乎无法指出到底是什么。有人能帮忙吗？
代码示例
$("#chart").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].t
浏览 2提问于2015-07-07得票数 1
回答已采纳
我想在AngularJs应用程序中使用d3js图，然后将指令绑定到节点。
首先，我将js代码放在指令的链接函数中，一切都运行良好。
angular.module('myApp', []).
directive('grapheForces', function() {
return {
restrict: 'A',
link: function (scope, element) {
var width = 450;
var height = 400;
浏览 4提问于2014-02-13得票数 4
回答已采纳
我正在尝试以编程的方式切换工具提示(如这里提到的：)，并使其除一个问题外具有完全的功能。为了使其工作，我必须有工具提示触发器和工具提示属性，硬编码如下：
<input type="text" tooltip-trigger="show" tooltip="" field1>
在我的工作指令中，我可以更改工具提示属性并触发工具提示，但是如果我试图将这两个属性排除在外并尝试动态设置它们，ui引导程序就不会捡起它们，也不会显示工具提示。
html
<input type="text" field2>
js
myA
浏览 0提问于2015-05-12得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
