我希望在悬停个人资料照片后显示文字。我制作了一个“标题”标签,但它不能在不同的段落中显示文字。有替代方法吗?
这是我的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>
答案 0 :(得分:0)
这是另一种方法。只需对原始代码进行一些更改即可。希望这会有所帮助。
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>
答案 1 :(得分:0)
您可以在实际的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
小提琴:
答案 2 :(得分:0)
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);
});
&#13;
.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;
}
&#13;
<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>
&#13;
希望..这个替代解决方案适合你。!!
答案 3 :(得分:0)
你必须帮助jquery.Like这个:
$(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>