关键词：
【中文标题】鼠标悬停效果工具提示【英文标题】：hover effect tooltip following mouse 【发布时间】：2022-01-06 18:29:04 【问题描述】：我对 css 没有什么问题，我无法正常使用转换。如果工具提示有更多文本，那么鼠标和工具提示之间的空间就会很大。
如何将所有工具提示添加到相同的空间？
我的代码：
$('.tooltipLink').hover(function ()
var title = $(this).attr('data-tooltip');
$(this).data('tipText', title);
if(title == '')
else
$('<p class="tooltip"></p>').fadeIn(200).text(title).appendTo('body');
, function ()
$(this).attr('data-tooltip', $(this).data('tipText'));
$('.tooltip').fadeOut(200);
).mousemove(function (e)
var mousex = e.pageX;
var mousey = e.pageY;
$('.tooltip').css(
top: mousey,
left: mousex
)
);.tooltip
transform: translate(-50%, -200%);
display: none;
position: absolute;
color: #F0B015;
background-color: #000;
border: none;
border-radius: 4px;
padding: 15px 10px;
z-index: 10;
display: block;
width: 100%;
max-width: 200px;
top: 0;
left: 50%;
text-align: center;
.tooltip:after
content: "";
display: block;
position: absolute;
border-color: #000000 rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px 15px 0;
bottom: -13px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
/* ----------------------- Display ------------------------ */
*
box-sizing: border-box;
body
font-family: "Quicksand", sans-serif;
text-align: center;
padding: 20px 50px 0;
background: #222;
color: #eee;
height: 100vh;
.wrapper
margin: 100px auto;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
/* overflow: auto; */
.wrapper > *
margin-bottom: 100px;
flex-shrink: 0;
max-width: 300px;
img
max-width: 300px;
hr
max-width: 100px;
margin: 30px auto 0;
border-bottom: 1px solid #444;
h1
color: #F0B015;
font-size: 2em;
a
color: #eee;
input
text-align: left;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Moving Tooltips on anything.</h1>
<h2>Very light on the JS</h2>
<hr>
<div class="wrapper">
<a href="" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is">I'm a hyperlink</a>
<p class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is"> <strong>A Paragraph</strong><br><br>space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is, in this moment, powerful; the empathy she extends to her guests feels real and deep; the conversations</p>
<input type="text" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is" value="text input"></input>
<button type="text" class="tooltipLink" data-tooltip="I am a Button!">Button</button>
<img class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/karate.jpg">
</div>我尝试过使用变换，但没有帮助。如果我减少 -200% 的数量，那么文本越少，它就不起作用。它会喜欢闪光或根本不工作。
【问题讨论】：
【参考方案1】：$(".tooltipLink")
.hover(
function ()
var title = $(this).attr("data-tooltip");
$(this).data("tipText", title);
if (title == "")
else
$('<p class="tooltip"></p>').fadeIn(200).text(title).appendTo("body");
,
function ()
$(this).attr("data-tooltip", $(this).data("tipText"));
$(".tooltip").fadeOut(200);
)
.mousemove(function (e)
var mousex = e.pageX;
var mousey = e.pageY - $(".tooltip:visible").outerHeight(true);
$(".tooltip").css(
top: mousey,
left: mousex,
);
);.tooltip
transform: translate(-50%, -200%);
transform: translateX(-50%);
display: none;
position: absolute;
color: #f0b015;
background-color: #000;
border: none;
border-radius: 4px;
padding: 15px 10px;
z-index: 10;
display: block;
width: 100%;
max-width: 200px;
top: 0;
left: 50%;
text-align: center;
.tooltip:after
content: "";
display: block;
position: absolute;
border-color: #000000 rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px 15px 0;
bottom: -13px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
/* ----------------------- Display ------------------------ */
*
box-sizing: border-box;
body
font-family: "Quicksand", sans-serif;
text-align: center;
padding: 20px 50px 0;
background: #222;
color: #eee;
height: 100vh;
.wrapper
margin: 100px auto;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
/* overflow: auto; */
.wrapper > *
margin-bottom: 100px;
flex-shrink: 0;
max-width: 300px;
img
max-width: 300px;
hr
max-width: 100px;
margin: 30px auto 0;
border-bottom: 1px solid #444;
h1
color: #f0b015;
font-size: 2em;
a
color: #eee;
input
text-align: left;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Moving Tooltips on anything.</h1>
<h2>Very light on the JS</h2>
<hr>
<div class="wrapper">
<a href="" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is">I'm a hyperlink</a>
<p class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is"> <strong>A Paragraph</strong><br><br>space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is, in this moment, powerful; the empathy she extends to her guests feels real and deep; the conversations</p>
<input type="text" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is" value="text input"></input>
<button type="text" class="tooltipLink" data-tooltip="I am a Button!">Button</button>
<img class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/karate.jpg">
</div>【讨论】：
将鼠标悬停在工具提示区域上的工具提示指令
】将鼠标悬停在工具提示区域上的工具提示指令【英文标题】：TooltipDirectivewithmouseoverontooltiparea【发布时间】：2018-12-0805:58:14【问题描述】：我的要求是当用户将鼠标悬停在图标上时，应该出现工具提示，并且用户可以点击工具... 查看详情
鼠标悬停时的SVG工具提示？
】鼠标悬停时的SVG工具提示？【英文标题】：SVGtooltiponmousehover?【发布时间】：2015-05-1105:43:09【问题描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不... 查看详情
鼠标悬停在 QGraphicsPixmapItem 上后 Qt 显示工具提示
】鼠标悬停在QGraphicsPixmapItem上后Qt显示工具提示【英文标题】：QtDisplaytooltipaftermousehoveronQGraphicsPixmapItem【发布时间】：2014-05-1019:04:47【问题描述】：我正在使用QGraphicView来显示包含QGraphicsPixmapItems的游戏地图。我需要在鼠标悬停... 查看详情
鼠标悬停时的 SVG 地图工具提示，可单击
】鼠标悬停时的SVG地图工具提示，可单击【英文标题】：SVGMaptooltipsonmouseover,abilitytoclick【发布时间】：2016-10-1605:06:49【问题描述】：我创建了一个SVG地图，但是，我想制作它，以便当有人将鼠标悬停在它上面时有一个工具提示... 查看详情
谷歌地图 v3 标记鼠标悬停工具提示
】谷歌地图v3标记鼠标悬停工具提示【英文标题】：googlemapsv3markermouseovertooltip【发布时间】：2011-02-0919:33:36【问题描述】：当鼠标悬停在标记上时，我想放置一个用div自己制作的工具提示，但我不知道如何获取屏幕位置以将div放... 查看详情
根据行鼠标悬停的条件显示行工具提示
】根据行鼠标悬停的条件显示行工具提示【英文标题】：displayrowtooltiponcondtionbaseonrowmousehover【发布时间】：2013-07-1109:01:12【问题描述】：我在网格渲染事件中使用此代码在行鼠标悬停时显示tplgrid.tip=newExt.ToolTip(view:grid.getView(),tar... 查看详情
将鼠标悬停在闪亮的 ggplot 上时的工具提示
】将鼠标悬停在闪亮的ggplot上时的工具提示【英文标题】：ToolTipwhenyoumouseoveraggplotonshiny【发布时间】：2015-03-1323:50:56【问题描述】：我正在构建一个闪亮的应用程序。我正在使用ggplot绘制图表。当我将鼠标悬停在图表上的点上... 查看详情
将鼠标悬停在标题列数据表上时显示工具提示
】将鼠标悬停在标题列数据表上时显示工具提示【英文标题】：ShowTooltipwhenmouseovertheheadercolumndataTable【发布时间】：2014-03-0910:46:08【问题描述】：当鼠标悬停在表头上时如何显示动态表p:dataTable表头的工具提示以显示表头列的整... 查看详情
鼠标悬停时在工具提示中显示全文
】鼠标悬停时在工具提示中显示全文【英文标题】：Showfulltextintooltiponmouseover【发布时间】：2018-06-0201:49:07【问题描述】：我有一个输入，我将长文本绑定到来自AngularJS。我想显示一个省略号，并在mouseover上，在工具提示中显示... 查看详情
如何在鼠标悬停时显示工具提示或项目信息？
】如何在鼠标悬停时显示工具提示或项目信息？【英文标题】：howcanIdisplaytooltiporiteminformationonmouseover?【发布时间】：2011-02-2820:08:20【问题描述】：我在一个屏幕上显示5userImage。我想在这些userImage上的mouseover上显示userID和email。... 查看详情
extjs4 在按钮单击而不是鼠标悬停时显示工具提示
】extjs4在按钮单击而不是鼠标悬停时显示工具提示【英文标题】：extjs4displaytooltiponbuttonclickinsteadofmousehover【发布时间】：2012-12-1223:01:56【问题描述】：我正在尝试在下面的工具提示中添加一个点击监听器。我不希望在鼠标悬停... 查看详情
当鼠标悬停在 MFC C++ 中列表控件的列标题上时显示工具提示
】当鼠标悬停在MFCC++中列表控件的列标题上时显示工具提示【英文标题】：DisplayToolTipwhenmousehoveronColumnHeaderofListControlinMFCC++【发布时间】：2017-07-2611:34:45【问题描述】：我有一个场景，当我将鼠标悬停在MFCC++中列表控件的列标题... 查看详情
如何在primefaces中将工具提示重新定位到左上角或鼠标悬停？(代码片段)
...更改工具提示在JSF中显示的位置。喜欢左上角或右上角或鼠标悬停。<p:tooltipfor="rowEditButton"value="ClicktoEdit"></p:tooltip>鼠标悬停是我要找的！答案尝试使用primefaces-extension工具提示。它拥有您需要的一切。Primefacesextension-tool... 查看详情
将鼠标悬停在数据表中的行上时，丰富的工具提示不会更新
】将鼠标悬停在数据表中的行上时，丰富的工具提示不会更新【英文标题】：richtooltipnotupdatingwhenhoveringonrowsindatatable【发布时间】：2012-06-2708:52:59【问题描述】：我有一个数据表，我想在将鼠标悬停在表中的列上时显示丰富的工... 查看详情
工具提示器在第一次鼠标悬停时不显示
】工具提示器在第一次鼠标悬停时不显示【英文标题】：tooltipsternotshowingonfirstmouseover【发布时间】：2013-12-0320:52:57【问题描述】：我正在尝试找出使用tooltipster插件触发动态工具提示的最佳方法。基本上我有一个脚本可以循环出... 查看详情
在多个滑块元素上捕获鼠标悬停
】在多个滑块元素上捕获鼠标悬停【英文标题】：Capturingmouseoveronmultiplesliderelements【发布时间】：2018-04-0520:39:59【问题描述】：你想做什么？我正在尝试跟踪鼠标悬停在轮播滑块每张幻灯片上的工具提示（轮播滑块示例：here）... 查看详情
Twitter Bootstrap Twipsy - 悬停在工具提示上方
...悬停工具提示，并在工具提示中包含一个链接。问题是当鼠标光标离开元素时，工具提示消失，用户无法访问工具提示内的链接（看看Demo并看到您无法将鼠标 查看详情