ok.verstehe.
Ich habe mir mal den js-code angesehen und nach stundenlangem probieren habe ich es hinbekommen, dass die Ausrichtung oben immer zentriert ist, den Code habe ich hier angepasst:
if (f.isShown())
return f;
h.stop(!0, !0);
var o = c(d, h, e);
e.tip && h.html(d.data("title")), b = a.Event(), b.type = "onBeforeShow", g.trigger(b, [o]);
if (b.isDefaultPrevented())
return f;
var z = a(window), y = z.width();
y=y-(y/2)-350;
o = c(d, h, e), h.css({
position : "absolute",
top : o.top,
left : y
}), n = !0, m[0].call(f, function() {
b.type = "onShow", n = "full", g.trigger(b)
});
Ich habe also left mit einer variablen deklariert, die vorab die Bildschirmmaße liest.
Kann ich denn nicht vielleicht irgendwo im Code die Bildgröße hart einstellen, oder hilft mir das auch nicht weiter?
Die Bildgröße der Vorschau ist nämlich festgelegt.
So ist es halt ungünstig, weil der Kunde beim ersten Aufruf mit dem Tooltip den Cursor verdeckt und nicht links oder rechts den Tooltip der nebenstehenden Kategorie einblenden kann.
Hier nochmal der vollständige js-Code:
/*!
* jQuery Tools v1.2.7 - The missing UI library for the Web
*
* tooltip/tooltip.js
* tooltip/tooltip.dynamic.js
*
* NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
* &&(f-=i)
* http://flowplayer.org/tools/
*
*/
(function(a) {
a.tools = a.tools || {
version : "v1.2.7"
}, a.tools.tooltip = {
conf : {
effect : "toggle",
fadeOutSpeed : "fast",
predelay : 30,
delay : 30,
opacity : 1,
tip : 0,
fadeIE : !1,
position : ["top", "center"],
offset : [-20, 0],
relative : !1,
cancelDefault : !0,
events : {
def : "mouseenter,mouseleave",
input : "focus,blur",
widget : "focus mouseenter,blur mouseleave",
tooltip : "mouseenter,mouseleave"
},
layout : "<div/>",
tipClass : "tooltip"
},
addEffect : function(a, c, d) {
b[a] = [c, d]
}
};
var b = {
toggle : [
function(a) {
var b = this.getConf(), c = this.getTip(), d = b.opacity;
d < 1 && c.css({
opacity : d
}), c.show(), a.call()
},
function(a) {
this.getTip().hide(), a.call()
}],
fade : [
function(b) {
var c = this.getConf();
!a.browser.msie || c.fadeIE ? this.getTip().fadeTo(c.fadeInSpeed, c.opacity, b) : (this.getTip().show(), b())
},
function(b) {
var c = this.getConf();
!a.browser.msie || c.fadeIE ? this.getTip().fadeOut(c.fadeOutSpeed, b) : (this.getTip().hide(), b())
}]
};
function c(b, c, d) {
var e = d.relative ? b.position().top : b.offset().top, f = d.relative ? b.position().left : b.offset().left, g = d.position[0];
e -= c.outerHeight() - d.offset[0], f += b.outerWidth() + d.offset[1], /iPad/i.test(navigator.userAgent) && (e -= a(window).scrollTop());
var h = c.outerHeight() + b.outerHeight();
g == "center" && (e += h / 2), g == "bottom" && (e += h), g = d.position[1];
var i = c.outerWidth() + b.outerWidth();
g == "center" && (f -= i / 2), g == "left" && (f -= i);
return {
top : e,
left : f
}
}
function d(d, e) {
var f = this, g = d.add(f), h, i = 0, j = 0, k = d.attr("title"), l = d.attr("data-tooltip"), m = b[e.effect], n, o = d.is(":input"), p = o && d.is(":checkbox, :radio, select, :button, :submit"), q = d.attr("type"), r = e.events[q] || e.events[ o ? p ? "widget" : "input" : "def"];
if (!m)
throw "Nonexistent effect \"" + e.effect + "\"";
r = r.split(/,\s*/);
if (r.length != 2)
throw "Tooltip: bad events configuration for " + q;
d.on(r[0], function(a) {
clearTimeout(i), e.predelay ? j = setTimeout(function() {
f.show(a)
}, e.predelay) : f.show(a)
}).on(r[1], function(a) {
clearTimeout(j), e.delay ? i = setTimeout(function() {
f.hide(a)
}, e.delay) : f.hide(a)
}), k && e.cancelDefault && (d.removeAttr("title"), d.data("title", k)), a.extend(f, {
show : function(b) {
if (!h) {
l ? h = a(l) : e.tip ? h = a(e.tip).eq(0) : k ? h = a(e.layout).addClass(e.tipClass).appendTo(document.body).hide().append(k) : ( h = d.next(), h.length || ( h = d.parent().next()));
if (!h.length)
throw "Cannot find tooltip for " + d
}
if (f.isShown())
return f;
h.stop(!0, !0);
var o = c(d, h, e);
e.tip && h.html(d.data("title")), b = a.Event(), b.type = "onBeforeShow", g.trigger(b, [o]);
if (b.isDefaultPrevented())
return f;
var z = a(window), y = z.width();
y=y-(y/2)-350;
o = c(d, h, e), h.css({
position : "absolute",
top : o.top,
left : y
}), n = !0, m[0].call(f, function() {
b.type = "onShow", n = "full", g.trigger(b)
});
var p = e.events.tooltip.split(/,\s*/);
h.data("__set") || (h.off(p[0]).on(p[0], function() {
clearTimeout(i), clearTimeout(j)
}), p[1] && !d.is("input:not(:checkbox, :radio), textarea") && h.off(p[1]).on(p[1], function(a) {
a.relatedTarget != d[0] && d.trigger(r[1].split(" ")[0])
}), e.tip || h.data("__set", !0));
return f
},
hide : function(c) {
if (!h || !f.isShown())
return f;
c = a.Event(), c.type = "onBeforeHide", g.trigger(c);
if (!c.isDefaultPrevented()) {
n = !1, b[e.effect][1].call(f, function() {
c.type = "onHide", g.trigger(c)
});
return f
}
},
isShown : function(a) {
return a ? n == "full" : n
},
getConf : function() {
return e
},
getTip : function() {
return h
},
getTrigger : function() {
return d
}
}), a.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","), function(b, c) {
a.isFunction(e[c]) && a(f).on(c, e[c]), f[c] = function(b) {
b && a(f).on(c, b);
return f
}
})
}
a.fn.tooltip = function(b) {
var c = this.data("tooltip");
if (c)
return c;
b = a.extend(!0, {}, a.tools.tooltip.conf, b), typeof b.position == "string" && (b.position = b.position.split(/,?\s/)), this.each(function() {
c = new d(a(this), b), a(this).data("tooltip", c)
});
return b.api ? c : this
}
})(jQuery);
(function(a) {
var b = a.tools.tooltip;
b.dynamic = {
conf : {
classNames : "top right bottom left"
}
};
function c(b) {
var c = a(window), d = c.width() + c.scrollLeft(), e = c.height() + c.scrollTop();
return [b.offset().top <= c.scrollTop(), d <= b.offset().left + b.width(), e <= b.offset().top + b.height(), c.scrollLeft() >= b.offset().left]
}
function d(a) {
var b = a.length;
while (b--)
if (a[b])
return !1;
return !0
}
a.fn.dynamic = function(e) {
typeof e == "number" && ( e = {
speed : e
}), e = a.extend({}, b.dynamic.conf, e);
var f = a.extend(!0, {}, e), g = e.classNames.split(/\s/), h;
this.each(function() {
var b = a(this).tooltip().onBeforeShow(function(b, e) {
var i = this.getTip(), j = this.getConf();
h || ( h = [j.position[0], j.position[1], j.offset[0], j.offset[1], a.extend({}, j)]), a.extend(j, h[4]), j.position = [h[0], h[1]], j.offset = [h[2], h[3]], i.css({
visibility : "hidden",
position : "absolute",
top : e.top,
left : e.left
}).show();
var k = a.extend(!0, {}, f), l = c(i);
if (!d(l)) {
l[2] && (a.extend(j, k.top), j.position[0] = "top", i.addClass(g[0])), l[3] && (a.extend(j, k.right), j.position[1] = "right", i.addClass(g[0])), l[0] && (a.extend(j, k.bottom), j.position[0] = "bottom", i.addClass(g[2])), l[1] && (a.extend(j, k.left), j.position[1] = "left", i.addClass(g[3]));
if (l[0] || l[2])
j.offset[0] *= -1;
if (l[1] || l[3])
j.offset[1] *= -1
}
i.css({
visibility : "visible"
}).hide()
});
b.onBeforeShow(function() {
var a = this.getConf(), b = this.getTip();
setTimeout(function() {
a.position = [h[0], h[1]], a.offset = [h[2], h[3]]
}, 0)
}), b.onHide(function() {
var a = this.getTip();
a.removeClass(e.classNames)
}), ret = b
});
return e.api ? ret : this
}
})(jQuery);
Beste Grüße
Thomas