鼠标悬停效果工具提示

Posted 2023-05-08

【中文标题】鼠标悬停效果工具提示

【英文标题】：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>