悬停个人资料图片后的描述文本

Question

我想在悬停个人资料图片后显示文字。我制作了一个“标题”标签，但它无法在不同的段落中显示文本。有没有其他方法可以做到这一点？

这是我的 CSS 代码：

.tooltip {
   display:none;
   position:absolute;
   border:1px solid #333;
   background-color:#161616;
   border-radius:5px;
   padding:10px;
   color:#fff;
   font-size:12px Arial;
}

这是我的html代码：

<table style="width:100%">
<tr>
<td><a><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3 "></a></td>
<td><img src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"></td>
<td><img src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"></td>
</tr>
</table>

<script>
$(function () {
  $(document).tooltip({
      content: function () {
          return $(this).prop('title');
      }
  });
});
</script>

Answer 1

这是一种替代方法。只需对原始代码进行一些更改。希望这会有所帮助。

a {
  position: relative;
}
a:after {
  position: absolute;
  display: none;
  content: attr(data-tooltip);
  bottom: 0;
  border: 1px solid #333;
  background-color: #161616;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 12px Arial;
}
a:hover:after {
  display: block;
}

<table style="width:100%">
<tr>
<td><a data-tooltip="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3"><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip"></a></td>
  <td><a data-tooltip="Tooltip"><img src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"></a></td>
  <td><a data-tooltip="Tooltip"><img src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"></a></td>
</tr>
</table>

Answer 2

您可以在实际的 HTML 中放置换行符，通过按 Enter 将标题文本的内容分隔到单独的行中，如下所示：

<table style="width:100%">
<tr>
<td><a><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To;

Major/Year: Cell and Molecular Biology/3 "></a></td>

或者，像这样使用换行符：

title="First paragraph

Second paragraph

小提琴：

https://jsfiddle.net/uukaw084/1/

Answer 3

jqueryUI 工具提示的替代方案只是定义您自己的简单工具提示插件，以便可以根据您的要求对其进行自定义。

这个简单的工具提示插件显示相对于鼠标位置的工具提示。

let tooltips = $('.tooltip span');

(function($) {
  $.fn.mytooltip = function(e) {
    let x = (e.pageX + 20) + 'px',
      y = (e.pageY + 20) + 'px';

    for (let i = 0; i < tooltips.length; i++) {
      tooltips[i].style.top = y;
      tooltips[i].style.left = x;
    }
    return this;
  };
}(jQuery));

$('a').on('mousemove', function(e) {
  $(this).mytooltip(e);
});

.tooltip {
  text-decoration: none;
  position: relative;
}

.tooltip span {
  display: none;
}

.tooltip:hover span {
  display: block;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  border-radius: 5px;
  padding: 5px 15px;
  position: fixed;
  overflow: hidden;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="tooltip">
  <img alt="" src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" />
  <span>hiiiiii</span>
</a>
<a class="tooltip">
  <img alt="" src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200" />
  <span>hello</span>
</a>

希望.. 这个替代解决方案对您有用。！！

Answer 4

你必须帮助jquery。像这样：

$(document).ready(function(){
    $('img').on('mousemove',function(e){
        var txt ="";
       var x = $(this).attr('data').split(';');
       $.each(x, function( index, value ) {
         txt += value + "<br>";
     })
       $('.myTooltip').css({'left':e.clientX + 10,'top':e.clientY})
       $('.myTooltip').html(txt).show();
    })

    $('img').on('mouseleave',function(){
        $('.myTooltip').hide();
    }) 

})

.myTooltip {
    background-color: rgba(0,0,0,0.8);
    color: orange;
    display: inline-block;
    position: absolute;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%">
    <tr>
        <td>
            <a>
                <img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" data="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3 ">
            </a>
        </td>
        <td>
            <a>
                <img data="Name: Maryam; Major/Year:Geneticist/40" src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200">
            </a>
        </td>

        <td>
            <a>
                <img data="Name: Shila Amir; Major/Year:Laboratory sciences / 29 " src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200">
            </a>    
        </td>
    </tr>
</table>
<span class="myTooltip"></span>