Цитата:
Сообщение от wordpost
когда убераеш мышку с объекта, долго весит тултип
|
:no: :write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tooltip demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>.ui-tooltip,.arrow:after{background:#ADFF2F;color:#8B4513;border:2px solid white}
.ui-tooltip a{color:#DC143C}
.ui-tooltip{padding:10px 20px;border-radius:20px;font:400 10px "Times New Roman",Times,serif;text-transform:uppercase;box-shadow:0 0 7px #8B4513}
.arrow{width:70px;height:16px;overflow:hidden;position:absolute;left:50%;margin-left:-35px;bottom:-16px}
.arrow.top{top:-16px;bottom:auto}
.arrow.left{left:20%}
.arrow:after{content:"";position:absolute;left:20px;top:-20px;width:25px;height:25px;box-shadow:6px 5px 9px -9px black;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);tranform:rotate(45deg)}
.arrow.top:after{bottom:-20px;top:auto}
body{background:#00FA9A}
.ui-icon-closethick{position:absolute;right:5px;top:8px;cursor:pointer}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element.
When you hover the element with your mouse, the title attribute is displayed in a little box next
to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href=
"http://themeroller.com" title=
"ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips
accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context
of each field.</p>
<p><label for="age">Your age:</label> <input id="age" title=
"We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
<script>
$('[title]').tooltip(
{close: function(event, ui)
{
$(ui.tooltip).unbind('mouseenter');
ui.tooltip.one('mouseenter', function()
{
var clone = $(ui.tooltip).clone();
clone.mouseleave(function()
{
clone.fadeOut(300, function()
{clone.remove();
}
)
}
);
$(this).parent().append(clone);
clone.css({opacity: 1, visibility: 'visible'});
$("<div>")
.addClass("ui-button-icon-primary ui-icon ui-icon-closethick")
.appendTo(clone).click(function ()
{
clone.remove()
}
);
}
);
},
hide: {duration: 300},
content: function () {
return $(this).prop('title') + ' <a href="http://javascript.ru/" target="_blank" >лицензия<\/a>'
},
track: false,
show: {duration: 300},
position: {
my: "center bottom-15",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}
);
</script>
</body>
</html>
|