html - 工具提示无法按照浏览器分辨率工作
问题描述
如果我悬停文本框,则提示将在右侧可见。但是当我将鼠标悬停在最后一个元素上时,它无法正常工作并且正在隐藏。
请看下面的小提琴,
小提琴代码是用 jquery 编写的。我想要在angularjs中。
如果我有更多的文本框,水平滚动就会出现。那个时候,最后一张卡片(div 宽度),当它到达最后一个 div 时,工具提示是不可见的。
$('input[type="radio"]').on('change', function() {
var className = $(this).val();
var position;
switch (className) {
case 'right':
position = { my: 'left center', at: 'right+10 center' };
break;
}
position.collision = 'none';
$('input[type="text"]').tooltip('option', 'position', position);
$('input[type="text"]').tooltip('option', 'tooltipClass', className);
});
$('#options').buttonset();
$('input[type="text"]').tooltip();
$('input[value="right"]').trigger('change');
body { padding: 20px; }
.test{
width:100%;
display:inline-flex;
position : absolute;
overflow-x:scroll;
}
input[type="text"] { margin: 50px 0 0 0px; width:177px;}
.ui-tooltip {
background: #666;
color: white;
border: none;
padding: 0;
opacity: 1;
}
.ui-tooltip-content {
position: relative;
padding: 1em;
}
.ui-tooltip-content::after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
}
.right .ui-tooltip-content::after {
top: 18px;
left: -10px;
border-color: transparent #666;
border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
top: 18px;
right: -10px;
border-color: transparent #666;
border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
bottom: -10px;
left: 72px;
border-color: #666 transparent;
border-width: 10px 10px 0;
}
.bottom .ui-tooltip-content::after {
top: -10px;
left: 72px;
border-color: #666 transparent;
border-width: 0 10px 10px;
}
<div id="options">
<label for="right">Right</label><input type="radio" value="right" name="option" id="right" checked />
</div>
<div class="test">
<input type="text" title="I am a tooltip!" />
<input type="text" title="I am a tooltip!" />
<input type="text" title="I am a tooltip!" />
<input type="text" title="I am a tooltip!" />
<input type="text" title="I am a tooltip!" />
<input type="text" title="I am a tooltip!" />
<input type="text" title="I am a tooltip!" />
</div>
我想显示工具提示,如果它会到达最后一个右边,它应该显示为左侧,否则默认情况下它应该显示在右侧。
谁能告诉我我该怎么做?
解决方案
推荐阅读
- java - UML 中的特定数组类型?
- swift - 如何在后台使用 CoreData 获取数据?
- android - 第一次在应用程序中评估 ROOM 数据库时出现 java.lang.IllegalStateException
- javascript - 节点js。从硬盘安装 npm 包
- git - Git 功能在 VS Code、Windows 10 中不起作用
- python - 如何比较python中列表的所有值?
- css - 如何删除wordpress中未使用的css?
- angular - Angular Material Multi Drag Drop,将拖放限制在特定的下拉列表中
- python - 如何在烧瓶中嵌入 nnv 图?
- javascript - 错误类型错误:无法读取未定义的属性“aDataSort”-角度 8