html 可点击的工具提示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 可点击的工具提示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet"
type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8/>
<title>JS Bin</title>
<style>
.content {
position: relative;
}
.content .tooltip {
background-color: #d3d3d3;
border: 1px solid #777;
border-radius: 7px;
padding: 2px;
position: absolute;
width: 400px;
z-Index: 99999;
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="tooltip">
<ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li><a target="_blank" href="http://www.google.com">www.google.com</a></li>
</ul>
</div>
<p>
Lorem ipsum dolor sit amet, mauris enim. Quis nibh urna eget. Facilisis lorem condimentum mattis auctor id
commodo. Hymenaeos eget sollicitudin, viverra dictum ipsum fusce curae nam leo
</p>
</div>
<div class="content">
<div class="tooltip">
<ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li><a target="_blank" href="http://www.google.com">www.google.com</a></li>
</ul>
</div>
<p>
Lorem ipsum dolor sit amet, mauris enim. Quis nibh urna eget. Facilisis lorem condimentum mattis auctor id
commodo. Hymenaeos eget sollicitudin, viverra dictum ipsum fusce curae nam leo
</p>
</div>
<script>
$(function () {
$('.content').myTooltip({
speed: 200,
closeOnClick: true
});
});
$.fn.myTooltip = function (options) {
var defaults = {
speed: 650,
closeOnClick: false,
tooltipClass: 'tooltip'
};
var settings = $.extend({}, defaults, options);
var $this = $(this),
$tooltip = $this.find('.' + settings.tooltipClass);
setPosition();
$(window).resize(function () {
setPosition();
});
$this.mouseenter(function () {
$('.' + settings.tooltipClass, this).fadeIn(settings.speed);
}).mouseleave(function () {
$('.' + settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
});
if (settings.closeOnClick) {
$tooltip.click(function () {
$(this).stop(true, true).fadeOut(settings.speed);
});
}
function setPosition() {
$tooltip.css({top: $this.height(), left: 0});
}
};
</script>
</body>
</html>以上是关于html 可点击的工具提示的主要内容，如果未能解决你的问题，请参考以下文章