- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有两个工具提示,一个在外部元素上,另一个在内部元素上,如下所示:
如何在显示内部工具提示时删除外部工具提示?
代码非常标准,但请记住,有时 v-tooltip像模式一样放置工具提示 - 在正文级别,因此工具提示实际上可能不会嵌套。
<div id="app">
<div v-tooltip="'Outer Tooltip'">
Outer Area
<div v-tooltip="'Inner Tooltip'">
okokok
</div>
</div>
</div>
这是我尝试过的:
在 Outer Tooltip 上我放了一个这样的类:
v=tooltip="{content:'Outer Tooltip', classes:['killOnOtherOpen']}"
然后在内部工具提示上:
v=tooltip="getTextAndDoStuff()"
...
getTextAndDoStuff(){
$('.killOnOtherOpen').close();
return "Inner Tooltip";
}
但是我得到一个错误:
Error in render: "TypeError: $(...).close is not a function"
我试过这样:.close;
- 就像 close 不是一个函数 - 但没有任何反应,甚至没有错误。
我正在寻找一种更优雅或更标准的方法来执行此操作。向每个嵌套的工具提示集添加一个类和一个方法需要一段时间。
最佳答案
您可以在处理 mouseover
事件时使用 stop
修饰符来解决这个问题,并添加一个名为 isOpen
的 bool 属性来显示/包含外部工具提示。
stop
修饰符将阻止事件传播
console.clear()
new Vue({
el: '#app',
data: {
isOpen: false,
message: 'Outer Tooltip'
}
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
.box {
border: 1px solid red;
border-radius: 2px;
padding: 15px;
margin: 20px;
text-align: center;
cursor: pointer;
}
.box:hover {
box-shadow: 0 0 4px;
}
<script src="https://unpkg.com/popper.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/v-tooltip"></script>
<div id="app">
<div v-tooltip="{content: message,
show: isOpen}" class="box" @mouseover.stop="isOpen=true">
{{ message }}
<div v-tooltip="'Inner tooltip'" @mouseover.stop="isOpen=false" class="box">
okokok
</div>
</div>
</div>
关于javascript - 如何在内部 v-tooltip 悬停时关闭外部 v-tooltip,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53106709/
我有一个多行的 Google LineChart。这些点不共享相同的 X 值,所以我必须以某种方式格式化我的数据以使其工作: var data = google.visualization.array
如何在某些 View 上显示工具提示/提示? 例如,在按钮上。 最佳答案 感谢两位 Andrew和 Sorin为解决方向。所提出的解决方案大多有效,但是当我使用它们时,它们完全弄乱了布局。事实证明,工
我在 DataGridView 上使用 winforms ToolTip 类(不是 datagridview 的工具提示,因为我需要自定义格式。) 然后我在 DataGridView 的 CellMo
我有两个工具提示,一个在外部元素上,另一个在内部元素上,如下所示: 如何在显示内部工具提示时删除外部工具提示? Here's a Fiddle 代码非常标准,但请记住,有时 v-tooltip像模式一
是的,这个问题已经被问过here在 SO。 问题是该问题的解决方案是隐藏工具提示,我真的需要删除而不是隐藏它。 我正在使用我制作的几个函数向我的表单中的几个控件添加工具提示。 有两个函数,一个是设置T
我的方法是使用特定的工具提示格式配置图表: Highcharts.chart('container', { tooltip: { formatter: function
我正在尝试在带有 Datagrid 的 WPF 窗体的单元格上设置工具提示。这行得通,但我不希望它在没有弹出文本可显示的单元格中弹出。 我在这里看到过类似的问题,但我无法让这些解决方案发挥作用。 这是
Angular 2 (2.0.0-rc.4)我使用 Bootstrap 的 Tooltip,Tooltip 需要在准备好后执行 javascript: $(function () { $('[da
目前我正在尝试将 ToolTip 的 IsOpen 属性绑定(bind)到我的支持 View 模型的属性。此外,绑定(bind)模式设置为“OneWayToSource”。 这是应用于 TreeVie
我应该关注以下 HTML 验证错误吗? …rel="tooltip" data-placement="bottom" data-original-title="Permalink">
我有一组数据,正在以散点图形式绘制。当我将鼠标悬停在其中一个圆圈上时,我希望它弹出数据(例如 x、y 值,也许更多)。这是我尝试使用的: vis.selectAll("circle") .dat
http://jsfiddle.net/Margo/yKG7X/1/我正在使用工具提示功能,就像 fiddle 一样。 $("#placeholder").bind("plothover",
当前的 Android YouTube 应用程序为导航用户界面提供了有用的提示。例如:当用户第一次在播放视频时切换选项卡时,会弹出一个带有箭头的小“工具提示”,上面写着“您也可以通过左右滑动来切换选项
我正在为我的项目使用 NVD3 库,并编写了以下代码。 var chart = nv.models.lineChart() .useInteractiveGuideline(t
我正在显示 jQuery UI Tooltip悬停时,就在我的元素中间。但是当将鼠标悬停在工具提示上时,工具提示本身就会消失。 (传播问题) 元素: 带有工具提示: 因此,当我将鼠标悬停在工具提示本身
我正在尝试使用从以下内容中找到的 .tooltip():Jquery-ui tooltip 。我拥有的是一个 Rails 应用程序,它在表格中包含一些信息。在单独的牢房中。目前,您可以通过单击单元格来
我使用 Highcharts 创建了一个图表。 工具提示在 FF 和 IE 中工作正常,但在 chorme 中,文本超出了框架。 我尝试使用 HTML tooltip: { //Tr
长话短说:我有一个窗口,在列表框中显示一堆图表。当鼠标悬停在图表上(使用 LineSeries)时,数据点后面有一条线(捕捉到数据点位置)。在那条线附近,我将展示一个由弹出窗口制成的工具提示,其中显示
现在使用 nv.d3 示例中的 stackedAreaChart(),当您将鼠标悬停在时间序列中的某个点上时,您会得到一个工具提示。 我垂直对齐了 3 个时间序列。如果鼠标悬停在其中任何一个点上,我希
我创建了一个具有两个数据集的 Chart JS 2 图。 当我将鼠标悬停在一行上时,我只会得到当前行的数据,但我也想查看另一行的数据。 如何在工具提示中添加特定日期的所有数据? 最佳答案 要在工具提示
我是一名优秀的程序员,十分优秀!