I'm trying to make my tooltips pop up in the left side of the cursor instead of the right side, with a jquery plugin called EasyTooltip.
I'm trying to give a negative value in the header's call, which aim would be to affect the x-axis positioning, but with no effects (nothing appears, while a positive value in both axis shall normally work) :
<script type="text/javascript">
$(document).ready(function() {
$(".middle img").easyTooltip({
tooltipId: "easyTooltip2",
xOffset: -300,
yOffset: 50
});
});
</script>
I'm quite new to javascript, and I think that I'd have to hack the script, but I would need your advice here. This is the script :
/*
* Easy Tooltip 1.0 - jQuery plugin
* written by Alen Grakalic
*
*
* Copyright (c) 2009 Alen Grakalic ()
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
*
*
*/
(function($) {
$.fn.easyTooltip = function(options){
// default configuration properties
var defaults = {
xOffset: 10,
yOffset: 20,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function() {
var title = $(this).attr("title");
$(this).hover(function(e){
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title","");
if (content != "" && content != undefined){
$("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
$("#" + options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
.css("display","none")
.fadeIn("fast")
}
},
function(){
$("#" + options.tooltipId).remove();
$(this).attr("title",title);
});
$(this).mousemove(function(e){
$("#" + options.tooltipId)
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
});
if(options.clickRemove){
$(this).mousedown(function(e){
$("#" + options.tooltipId).remove();
$(this).attr("title",title);
});
}
});
};
})(jQuery);
Many thanks for any input. Cheers,
I'm trying to make my tooltips pop up in the left side of the cursor instead of the right side, with a jquery plugin called EasyTooltip.
I'm trying to give a negative value in the header's call, which aim would be to affect the x-axis positioning, but with no effects (nothing appears, while a positive value in both axis shall normally work) :
<script type="text/javascript">
$(document).ready(function() {
$(".middle img").easyTooltip({
tooltipId: "easyTooltip2",
xOffset: -300,
yOffset: 50
});
});
</script>
I'm quite new to javascript, and I think that I'd have to hack the script, but I would need your advice here. This is the script :
/*
* Easy Tooltip 1.0 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe./post/4380/easy-tooltip--jquery-plugin
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.
*
*/
(function($) {
$.fn.easyTooltip = function(options){
// default configuration properties
var defaults = {
xOffset: 10,
yOffset: 20,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function() {
var title = $(this).attr("title");
$(this).hover(function(e){
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title","");
if (content != "" && content != undefined){
$("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
$("#" + options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
.css("display","none")
.fadeIn("fast")
}
},
function(){
$("#" + options.tooltipId).remove();
$(this).attr("title",title);
});
$(this).mousemove(function(e){
$("#" + options.tooltipId)
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
});
if(options.clickRemove){
$(this).mousedown(function(e){
$("#" + options.tooltipId).remove();
$(this).attr("title",title);
});
}
});
};
})(jQuery);
Many thanks for any input. Cheers,
Share Improve this question asked Dec 19, 2009 at 13:20 PeanutsPeanuts 2,6816 gold badges29 silver badges35 bronze badges3 Answers
Reset to default 3Actually just using a value like -200 will fix the left side of the tooltip but start causing probalems when you have more tooltip content. So, a better way to do this would be to determine the tooltip width with contents, then adjust the size (here is a demo). You'll have to change the plugin and css a tiny bit:
CSS
#easyTooltip{
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
color:#fff;
position: absolute;
top:0;
left: -9999px;
}
Script:
Replace this:
.css("left",(e.pageX + options.xOffset) + "px")
with this (in two places)
.css("left",(e.pageX - $('#'+ options.tooltipId).width() - options.xOffset - 20) + "px")
The tooltip needs to be positioned off the screen because if you had it set as display:none the width would return as zero. In the script you are subtracting the width of the tooltip, the offset and the width of the cursor (the 20) from the current mouse position to position the tooltip.
try alert((e.pageX + options.xOffset) + "px") after the css is applied in $(this).hover function, it might e back with NaNpx for some reason, else it might be shooting the tooltip off the left of the screen with -300, have you tried -1, -10, -100?
Also parseInt(options.xOffset) might help you out.
Just guessing here as it all looks ok in the script you quoted.
I changed the js so it can now change x axis when it's off the window size (but I also remove some of the options and optimized the script)
Anyway if it can help someone :
/*
* Easy Tooltip 1.0 - jQuery plugin
* written by Alen Grakalic
* adapt from http://cssglobe./post/4380/easy-tooltip--jquery-plugin
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.
*
*
* Renew by Spektrum media http://spektrummedia.
* Now the tooltip goes to the left when it's out of X scope
*
*/
(function ($) {
$.fn.easyTooltip = function (options) {
// default configuration properties
var defaults = {
xOffset: 10,
yOffset: 35,
tooltipId: "easyTooltip",
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function () {
$(this).hover(function (e) {
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
if (content != "" && content != undefined) {
var $tooltip = $("<div id='" + options.tooltipId + "'>" + content + "</div>");
$("body").append($tooltip);
if ($(window).width() < (e.pageX + $tooltip.width() + options.xOffset)) {
$tooltip
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX - $tooltip.outerWidth() - options.xOffset) + "px")
.show();
} else {
$tooltip
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
.show();
}
}
},
function () {
$("#" + options.tooltipId).remove();
});
$(this).mousemove(function (e) {
var $tooltip = $("#" + options.tooltipId);
if ($(window).width() < (e.pageX + $tooltip.width() + options.xOffset)) {
$tooltip
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX - $tooltip.outerWidth() - options.xOffset) + "px")
.show();
} else {
$tooltip
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
.show();
}
});
});
};
})(jQuery);
And don't forget to put this in your CSS :
#easyTooltip
{
position: absolute;
display: none;
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744071719a4553666.html
评论列表（0条）