it-swarm.com.de

Kann ich einen HTML-Tooltip (Titelattribut) formatieren?

Kann ich einen HTML-Tooltip formatieren?

Z.B. Ich habe ein DIV mit dem Attribut title = "foo!". Wenn ich die Textgröße meines Browsers vergrößert oder verkleinert habe, bleibt die Textgröße der QuickInfo unverändert. Gibt es eine Möglichkeit, die Skalierung der Tooltip-Schrift mit der Browsereinstellung vorzunehmen?

72
sunflowerpower

Es gibt aber auch andere Optionen wie Overlib und jQuery , die Ihnen diese Freiheit ermöglichen.

Persönlich würde ich jQuery als Weg empfehlen. Es ist normalerweise sehr unauffällig und erfordert keine zusätzlichen Einstellungen im Markup Ihrer Website (mit Ausnahme des Hinzufügen des Jquery-Skript-Tags in Ihrem <head>).

41
Sampson

Verwenden Sie Entitätscodes wie &#013; für CR, &#010; für LF und &#009; für TAB.

Zum Beispiel:

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>

62
Louis
16
matteo galiazzo

Lieber spät als nie, sagen sie immer.

Normalerweise würde ich jQuery verwenden, um eine solche Situation zu lösen. Bei der Arbeit an einer Website für einen Kunden, für den eine Lösung ohne Javascript erforderlich war, kam ich auf Folgendes:

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

Durch die Verwendung der folgenden CSS erhalten Sie dieselbe Situation wie bei einem Titel:

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

Dadurch haben Sie die Möglichkeit, es auch an Ihre Bedürfnisse anzupassen, und es funktioniert in allen Browsern. Auch diejenigen, bei denen Javascript deaktiviert ist.

Pros:

  • Sie haben großen Einfluss auf das Styling
  • Es funktioniert in (fast) allen Browsern

Nachteile:

  • Es ist schwieriger, den Tooltip zu positionieren
3
Sander Koedood

Nein, das ist nicht möglich, Browser haben ihre eigenen Möglichkeiten, Tooltips zu implementieren. Alles, was Sie tun können, ist, mit Javascript ein div zu erstellen, das sich wie ein HTML-Tooltip verhält (meistens ist es nur "zeigen auf Schwebeflug").

In diesem Fall müssen Sie sich keine Sorgen darüber machen, dass der Browser ein- oder auszoomt, da der Text im Tooltip div ein tatsächlicher HTML-Code ist und entsprechend skaliert wird.

Siehe Jonathan post für eine gute Ressource.

2
andyk

Es ist nicht möglich. Sie können jedoch einige Javascript-Bibliotheken verwenden, um einen solchen Tooltip zu erstellen, z. http://www.taggify.net/

2
Anton

Ich habe diese kleine Javascript-Funktion geschrieben, die alle Ihre nativen Titel-Tooltips in stilisierte Knoten konvertiert: http://jsfiddle.net/BurakUeda/g8r8L4vt/1/

mo_title = null;
mo_element = null;

document.onmousemove = function (e) {
        var event = e || window.event;
        var current_title;
        var moposx = e.pageX;  // current 
        var moposy = e.pageY;  // mouse positions

        var tooltips = document.getElementById("tooltips");  // element for displaying stylized tooltips (div, span etc.)

        var current_element = event.target || event.srcElement;  // the element we're currently hovering
        if (current_element == mo_element) return;  // we're still hovering the same element, so ignore
        if(current_element.title){
                current_title = current_element.title;  
        } else {
                current_title = "-_-_-";         // if current element has no title, 
                current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
        }
        if(mo_element == null){   // this is our first element  
                mo_element = current_element;
                mo_title = current_title;
        }
        if(mo_title) mo_element.title = mo_title;   // restore the title of the previous element

        mo_element = current_element;  // set current values
        mo_title = current_title;      // as default

        if(mo_element.title){
                var mo_current_title = mo_element.title;  // save the element title
                mo_element.title = "";  // set it to none so it won't show over our stylized tooltip
                if(mo_current_title == "-_-_-"){   //  if the title is fake, don't display it
                        tooltips.style.display = "none";
                        tooltips.style.left = "0px";
                        tooltips.style.left = "0px";
                        tooltips.innerHTML = "";
                } else { 
                        tooltips.style.display = "inline-block";
                        tooltips.style.left = (moposx + 10) + "px";
                        tooltips.style.top = (moposy + 10) + "px";
                        tooltips.innerHTML = mo_current_title;
                }
        }
};
#tooltips {
    display: none;
    position: absolute;
    left 0;
    top: 0;
    color: white;
    background-color: darkorange;
    box-shadow: black 2px 2px 2px;
    padding: 5px;
    border-radius:5px;
}

#buttoncontainer{
    border: 1px black solid;
    padding: 10px;
    margin: 5px;
}
<div id="tooltips"></div>
<div>
    <div title="DIV #1">Division 1</div>
    <div id="buttoncontainer" title="Button container">
        <button title="Button with title"> Button #1 </button>
        <button> Button w/o title </button>
        <button title="
            <table border='1' cellpadding='4' cellspacing='0'>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td>
                    <td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td>
                    <td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td>
                    <td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td>
                </tr>
            </table>
        "> Button title containing HTML </button>
    </div>
</div

Vorteile:

  • Sie müssen nichts konvertieren. Schreiben Sie einfach Ihren üblichen HTML-Code mit nativen Titelattributen.
  • Sie können HTML-Tags und Inline-Stile in Ihren Titel-QuickInfos verwenden. (Siehe das Beispiel mit der gesamten HTML-Tabelle in einem Titel mit eigenem Stil.)

Nachteile:

  • Es ist Javascript
  • Nicht auf allen Browsern getestet, funktioniert jedoch mit den neuesten Versionen von Chrome, FF, IE und Opera

Es kann wahrscheinlich eleganter geschrieben werden und einige Zeilen enthalten, die nicht erforderlich sind.

Außerdem kann das Stackoverflow-Code-Snippet-Ding den HTML-Code nicht richtig analysieren. Überprüfen Sie ihn daher auf dem von mir bereitgestellten Link jsfiddle.

1
BurakUeda

Mootools hat auch eine Nice 'Tips' Klasse in ihrem 'more builder'.

1
tj111

Ich bin nicht sicher, ob es mit allen Browsern oder Tools von Drittanbietern funktioniert, aber ich hatte Erfolg bei der Angabe von "\ n" in Tooltips für Newline. Es funktioniert mindestens mit dhtmlx in ie11, Firefox und Chrome

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}
1
aggaton

Ich weiß, dass dies ein alter Beitrag ist, aber ich möchte meine Antwort als Referenz hinzufügen. Ich benutze jQuery und css, um meine Tooltips zu gestalten: easyest-tooltip-und-image-preview-using-jquery eine Demo: http://cssglobe.com/lab/tooltip/02/ ) .__ Auf meinen statischen Websites hat das einfach super geklappt. Während der Migration zu Wordpress wurde es jedoch angehalten. Meine Lösung bestand darin, Tags wie <br> and <span> in Folgendes zu ändern: &lt;br&gt; and &lt;span&gt; Dies funktioniert für mich.

0
Jurgen