26.11.2013, 14:06
|
|
Новичок на форуме
|
|
Регистрация: 26.11.2013
Сообщений: 7
|
|
|
Исчезновение подсказки tooltip ui при наведении мышкой на нее
Подскажите пожалуйста что нужно дописать в код, что бы подсказка не исчезала при на ведении на нее мышкой?
Вот имеющейся код:
$(function() {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(".btn").tooltip({
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 );
}
}
});
});
|
|
26.11.2013, 15:29
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
wordpost,
а просто увеличить время исчезновения на достаточное для копирования информации?
|
|
26.11.2013, 16:38
|
|
Новичок на форуме
|
|
Регистрация: 26.11.2013
Сообщений: 7
|
|
|
Увы, не достаточно(((
Ни как ума не дам, в сети второй день ищу, безрезультатно, может только не правильно запрос забиваю.
Но я думаю по любому можно как то это сделать, вопрос как?
Последний раз редактировалось wordpost, 26.11.2013 в 16:40.
|
|
26.11.2013, 16:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
wordpost,
для чего нужно ползать по подсказке?
|
|
26.11.2013, 17:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
wordpost,
а чем тогда неподходит увеличение времени показа подсказки?
|
|
26.11.2013, 23:21
|
|
Новичок на форуме
|
|
Регистрация: 26.11.2013
Сообщений: 7
|
|
Тем, что когда убераеш мышку с объекта, долго весит тултип, да и заказчику это тоже не нравиться(
css не причем, там сам блок тултипа с содержимом удаляется, когда убераешь мышку
Последний раз редактировалось wordpost, 26.11.2013 в 23:23.
|
|
26.11.2013, 23:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от wordpost
|
|
когда убераеш мышку с объекта, долго весит тултип
|
 
<!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>
|
|
27.11.2013, 00:12
|
|
Новичок на форуме
|
|
Регистрация: 26.11.2013
Сообщений: 7
|
|
Огромнейшее тебе спасибо, все супер!!!!
 |
|
|
|
