✔ Tooltip oberster Layer?

A

Asteria

Mitglied
Hallo zusammen ! :)

Ich brauche euch mal wieder ^^"
Unzwar habe ich das title-Attribut mithilfe von CSS ein
wenig hübscher gestaltet, also farblich an meine Seite
angepasst und mit einem border versehen.
Nichts weltbewegendes also ;)

Allerdings verwende ich das Ganze vor allem
innerhalb eines Frames... und die Hälfte des titles,
also des Wortes, dass ich damit angezeigt haben möchte,
verschwindet leider, wenn der Frame endet..

Nun meine Frage.. wie bekomme ich es hin,
dass der title von einem Frame in den nächsten
auch überlappt und das Wort nicht einfach
abgebrochen wird.. ?!

Danke schonmal im Voraus !
Und schönen Abend noch ! :)


PS: position: absolute; und z-index:1000; hat keinen Effekt gezeigt :((
 
Öhm. Ich würde fast sagen, dass geht nicht. Der z-Index bezieht sich ja auf die Ebenen innerhalb einer Seite. Mit dem Frame zerteilst du ja aber das Bildschirmfenster, der z-Index hat da ja gar keinen Effekt mehr.

Musst du denn unbedingt Frames nutzen? Das sollte man ja eigentlich vermeiden - aber das wirst du bestimmt wissen.

P.S.: Aber magst du mal bitte deine CSS posten, mich würde nämlich interessieren, wie du das title-Attribut formatiert hast. Dachte immer, das geht nicht.
 
Das ist die Scriptfile dafür..

Code: 
var qTipTag = "img,div,span";
var qTipX = 0;
var qTipY = 15;

tooltip = {
  name : "qTip",
  offsetX : qTipX,
  offsetY : qTipY,
  tip : null
}

tooltip.init = function () {
        var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
        if(!tipContainerID){ var tipContainerID = "qTip";}
        var tipContainer = document.getElementById(tipContainerID);

        if(!tipContainer) {
          tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
                tipContainer.setAttribute("id", tipContainerID);
          document.getElementsByTagName("body").item(0).appendChild(tipContainer);
        }

        if (!document.getElementById) return;
        this.tip = document.getElementById (this.name);
        if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};

        var a, sTitle, elements;

        var elementList = qTipTag.split(",");
        for(var j = 0; j < elementList.length; j++)
        {
                elements = document.getElementsByTagName(elementList[j]);
                if(elements)
                {
                        for (var i = 0; i < elements.length; i ++)
                        {
                                a = elements[i];
                                sTitle = a.getAttribute("title");
                                if(sTitle)
                                {
                                        a.setAttribute("tiptitle", sTitle);
                                        a.removeAttribute("title");
                                        a.removeAttribute("alt");
                                        a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
                                        a.onmouseout = function() {tooltip.hide()};
                                }
                        }
                }
        }
}

tooltip.move = function (evt) {
        var x=0, y=0;
        if (document.all) {//IE
                x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
                y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
                x += window.event.clientX;
                y += window.event.clientY;

        } else {//Good Browsers
                x = evt.pageX;
                y = evt.pageY;
        }
        this.tip.style.left = (x + this.offsetX) + "px";
        this.tip.style.top = (y + this.offsetY) + "px";
}

tooltip.show = function (text) {
        if (!this.tip) return;
        this.tip.innerHTML = text;
        this.tip.style.display = "block";
}

tooltip.hide = function () {
        if (!this.tip) return;
        this.tip.innerHTML = "";
        this.tip.style.display = "none";
}

window.onload = function () {
        tooltip.init ();
}




Und hier die CSS dazu.. :)

CSS: 
div#qTip {
 padding: 3px;
 border: 1px solid #000000;
 border-right-width: 2px;
 border-bottom-width: 2px;
 display: none;
 background: #603100;
 color: #FFFFFF;
 font: bold 0.75em Times New Roman, Georgia, Arial, Courier ;
 text-align: left;
 position: absolute;
 z-index: 1000;
}

#qTipAdd {
 color: #FFFFFF;
 font: bold 0.75em Times New Roman, Georgia, Arial, Courier ;
                 }



Sehr ärgerlich, dass das nicht geht.. :-/
Ich weiß zwar, dass Frames eher unglücklich sind,
wüsste aber keine Ersatzlösung. Der Inhalt des Frames
muss alle 30 Sekunden automatisch aktualisiert werden,
wenn ich das ohne Frames mache, betrifft das die ganze
Seite.. ist nicht gerade Traffic-sparend :o
..aber wenn du ne Idee hast für ne andere Lösung,
würd' ich die sehr gern hören ! :)
 
Moin.
Erstmal danke für die Codes - du formatierst dabei aber nicht das title-Attribut mit CSS, sondern fragst den Inhalt mittels JavaScript ab, um ihn dann in einem separaten div auszugeben. Das is nen bisschen mehr als "ich habe das title-Attribut mittels CSS ein wenig hübscher gemacht"... ;)

Zu deinem eigentlichen Problem:
Wie gesagt, ich bin mir recht sicher, dass du dein Anliegen nicht lösen kannst, wenn du Frames benutzt.
Man kann aber auch einzelne Bereiche einer Seite aktualisieren, ohne alles neu zu laden.

Sowas kann man u.a. über JavaScript bzw. jQuery realisieren. Was man in deinem Fall jetzt genau machen müsste, hängt davon ab, was da aktualisiert werden muss.
 
Planänderung:
Kann ich den JavaScript vielleicht irgendwie anpassen,
damit sobald der Tooltip den Framerahmen erreicht,
das Wort im title-Attribut zerlegt wird,
und in zwei Zeilen getrennt dargestellt wird?! :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück