Tooltips nur für die Bedienoberfläche ausschalten?

Horstmann

Ich suche nach einem Weg, nur die Tooltips für die Bedienoberfläche (Tabs, Buttons, etc.) loszuwerden, ohne irgendwelche Tooltips auf Webseiten zu verstecken.

Wenn mich meine Erinnerung nicht völlig täuscht, hat die about:config Einstellung browser.chrome.toolbar_tips bis vor einiger Zeit genau das gemacht.

Wenn ich jetzt aber diese Option auf false setze, werden einige Tooltips auf Webseiten, bzw. auf Webinhalte bezogene Tooltips, ebenfalls deaktiviert.

Siehe Anhang, der markierte Tooltip wird abgeschaltet durch die erwähnte Option, bis vor einigen Fx Versionen war das m.E. nicht der Fall.

Gibt es da vielleicht einen Weg mit CSS, oder zusätzliche about:config Einstellungen, das alte Verhalten zu imitieren?

Ich habe mal grob etwas Code von 2002Andreas missbraucht (in userChrome.css), was beim schnellen Test an sich funktioniert, aber dann halt wieder für alle Tooltips.

Ideal wäre so etwas in der Art mit Begrenzung auf die Bedienoberfläche.

Aber das habe ich leider noch nicht kapiert, welcher Tooltip für was dient, und ob man mit @media oder Selektoren etc. was anstellen kann.

Ich hab mir schon den Wolf recherchiert, jetzt dachte ich ich frage mal die Fachkräfte.

CSS

tooltip,
#tooltip,
.tooltip,
.balloonTooltip,
#aHTMLTooltip {
    display: none !important;
}

Mitleser

Eingebettet in .js benutze ich dies, damit ist aber nicht die gesamte Browser-Oberfläche abgedeckt:

JavaScript

tooltip[label*=" "], //Buttons
#tabbrowser-tab-tooltip, //Tab
.places-tooltip // Bookmarks

Mitleser

Sollte so funktionieren, bei den Buttons braucht es allerdings eine kleine "Anlaufzeit":

JavaScript

(function () {
    let css = `
tooltip[label*=" "],
#tabbrowser-tab-tooltip,
.places-tooltip {
    display: none !important;
}
    `;
    let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

2002Andreas

Zitat von Mitleser

Sollte so funktionieren

Entfernt aber auch auf z.B. Youtube den Tooltip.

Mitleser

Ja, das ist der .places-tooltip

der Bookmarks. Da weiß ich dann auch nicht weiter, war als Ansatz für eine Bastelei gedacht..

milupo

Ich verzichte nicht auf Tooltips. Aber wie wäre es mit einer @-moz-document-Regel, zumindest erst einmal mit der browser.xhtml? Es kann natürlich sein, dass da Tooltips noch in anderen Firefox-Dateien definiert werden.

Horstmann

Danke für die Antworten, ich werde das mal durch testen.

In meinen Notizen zum Thema habe ich noch etwas gefunden,

#remoteBrowserTooltip , und damit scheint's sogar zu klappen:

CSS

tooltip:not(#remoteBrowserTooltip) {
    display: none !important
}

browser.chrome.toolbar_tips ist dabei auf true ; ganz traue ich dem Braten nicht, muss ich mal weiter testen, nicht dass es irgendwo Ärger macht.

Edit: deckt nicht alle tooltips ab, zB die in der Find-Leiste und Menü und Overflow Button, und einige mehr...

Mitleser

@Horstmann

Ich habe mich erneut mit dem Thema beschäftigt und bin zu folgendem Ergebnis gekommen:

JavaScript

(function () {
    let css = `
tooltip[label*=" "],
#tabbrowser-tab-tooltip,
.places-tooltip {
    display: none !important;
}
#remoteBrowserTooltip{
    display: flex !important;
}
    `;
    let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Mira_Belle

Falls es mit dem Einbinden von CSS-Code mal Probleme geben sollte,

behaltet Euch mal jene Möglichkeit im Hinterkopf.

JavaScript

(function () {
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);      
    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        tooltip[label*=" "],
        #tabbrowser-tab-tooltip,
        .places-tooltip {
            display: none !important;
        }
        #remoteBrowserTooltip{
            display: flex !important;
        }
    `), null, null);
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Mitleser

Hier mal meine Lösung (mit Links/Mittel-Klick-Button):

JavaScript

/*1. Verhalten des Tooltips beim start*/
(function ttstart() {
// start config area--------------------------------------------

  let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.

// end config area----------------------------------------------
g1_tooltip_b = "0";
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
tooltip[label*=" "],
tooltip,
#tabbrowser-tab-tooltip {
    appearance: none !important;
    background-color: #3f3f3f !important;
    color: #F9F9F9 !important;
    font-size: 12px !important;
    line-height: unset !important;
    border: 1px solid #b03b0099 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    padding: 3px 7px 5px 7px !important;
    display: none !important;
}
.places-tooltip {
    display: flex !important;
}
#remoteBrowserTooltip{
    display: none !important;
}
#toggle-tt-button .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #cc5200 !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:hover .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #dddddd !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:active .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: gold !important;
    transition: fill 0.0s ease-in-out 0.0s !important;
} 
    `), null, null);

sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

/*2. Einschalten des Tooltips per Button*/
function tton() {
// start config area--------------------------------------------

  let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.

// end config area----------------------------------------------
g1_tooltip_b = "1";
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
tooltip[label*=" "],
tooltip,
#tabbrowser-tab-tooltip {
    display: flex !important;
}
.places-tooltip {
    display: flex !important;
}
#remoteBrowserTooltip{
    display: none !important;
}
#toggle-tt-button .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: gold !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:hover .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: #dddddd !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:active .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #cc5200 !important;
    transition: fill 0.0s ease-in-out 0.0s !important;
}
    `), null, null);

sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}

/*2a. Einschalten aller Tooltips per Button*/
function ttallon() {
// start config area--------------------------------------------

  let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.

// end config area----------------------------------------------
g1_tooltip_b = "2";
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
tooltip[label*=" "],
tooltip,
#tabbrowser-tab-tooltip {
    display: flex !important;
}
.places-tooltip {
    display: flex !important;
}
#remoteBrowserTooltip{
    display: flex !important;
    padding: 4px 7px 4px 7px !important;

}
#toggle-tt-button .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: #72a572 !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:hover .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: #dddddd !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:active .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #cd0e14 !important;
    transition: fill 0.0s ease-in-out 0.0s !important;
}
    `), null, null);

sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}

/*3. Ausschalten des Tooltips per Button*/
function ttoff() {
// start config area--------------------------------------------

  let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.

// end config area----------------------------------------------
g1_tooltip_b = "0";
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
tooltip[label*=" "],
tooltip,
#tabbrowser-tab-tooltip {
    display: none !important;
}
.places-tooltip {
    display: flex !important;
}
#remoteBrowserTooltip{
    display: none !important;
}
#toggle-tt-button .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #cc5200 !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:hover .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #dddddd !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:active .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: gold !important;
    transition: fill 0.0s ease-in-out 0.0s !important;
}
    `), null, null);

sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}

/*3a. Ausschalten aller Tooltips per Button*/
function ttalloff() {
// start config area--------------------------------------------

  let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.

// end config area----------------------------------------------
g1_tooltip_b = "3";
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
tooltip[label*=" "],
tooltip,
#tabbrowser-tab-tooltip {
    display: none !important;
}
.places-tooltip {
    display: none !important;
}
#remoteBrowserTooltip{
    display: none !important;
}
#toggle-tt-button .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #cd0e14 !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:hover .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-empty_contprop.svg") !important;
    fill: #dddddd !important;
    transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-tt-button:active .toolbarbutton-icon {
    list-style-image: url("${IconPath}/16_tooltip-text_contprop.svg") !important;
    fill: #72a572 !important;
    transition: fill 0.0s ease-in-out 0.0s !important;
}
    `), null, null);

sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}

/*4. Button Tooltip on/off*/
(function() {
/*Icon + Iconpfad wird durch 1.-3. geregelt (sollte der Pfad oder die Icons dort entfernt werden, muss das hier wieder aktiviert werden); Nachteil: nur ein Icon, keine transition; kein fill*/
/*
// start config area

let ButtonIcon = "16_tooltip-text_contprop.svg" // Name & Dateiendung des anzuzeigenden Symbols.
let ButtonIconPath = "/chrome/css/image/" // Pfad zum Ordner der das Symbol beinhaltet.

// end config area
*/

    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
       try {
          CustomizableUI.createWidget({
             id: 'toggle-tt-button',
             type: 'custom',
             defaultArea: CustomizableUI.AREA_NAVBAR,
             onBuild: function(aDocument) {         
                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                   id: 'toggle-tt-button',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: 'true',
                   label: 'Toggle Tooltip',
                   accesskey: '',
                   tooltiptext: 'Tooltip on/off\n\nLinksklick: Tt-in-Content auch \'on\' ausgeblendet,\nTt-Bookmarks auch \'off\' sichtbar\nMittelklick: ALLE Tt\'s \'on/off\' sichtbar/ausgeblendet',
/*                   style: "list-style-image: url('" + PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)) + ButtonIconPath + ButtonIcon + "');",*/
/*Icon+Pfad wird durch 1.-3. geregelt (sollte der Pfad oder die Icons dort entfernt werden, muss das hier wieder aktiviert werden)*/
               };                  
           for(var p in props)
           toolbaritem.setAttribute(p, props[p]);
           return toolbaritem;                
           }
        });
    } catch(e) { };

document.getElementById('toggle-tt-button').addEventListener( "click", onClick );

    function onClick(aEvent) {

if (event.button == 0) {
            if(g1_tooltip_b == '')  {
               g1_tooltip_b = '1';
            tton();
            }
    else if(g1_tooltip_b == '0') {
               g1_tooltip_b = '1';
            tton();
            }
    else if(g1_tooltip_b == '1') {
               g1_tooltip_b = '0';
            ttoff();
            }/**/
    else if(g1_tooltip_b == '3') {
               g1_tooltip_b = '0';
            ttoff();
            }
    else if(g1_tooltip_b == '2') {
               g1_tooltip_b = '1';
            ttoon();
            }
}
else
if (event.button == 1) {
         if(g1_tooltip_b == '')  {
               g1_tooltip_b = '2';
            tton();
            }            
    else if(g1_tooltip_b == '2')  {
               g1_tooltip_b = '3';
            ttalloff();
            }
    else if(g1_tooltip_b == '3') {
               g1_tooltip_b = '2';
            ttallon();
            }/**/
    else if(g1_tooltip_b == '1') {
               g1_tooltip_b = '2';
            ttallon();
            }
    else if(g1_tooltip_b == '0') {
               g1_tooltip_b = '3';
            ttalloff();
            }
}
else
if (event.button == 2) {
event.button.stopPropagation();
alert("Rechtsklick wird nicht unterstützt");
}
else {
alert("ERROR: B_Tooltip_toggle.uc.js");
    };
  }
})();

Alles anzeigen

Mitleser

^{Hier die Icons, einfach umbenennen (wenn nötig)...auf .svg}

16_tooltip-empty_contprop.txt 16_tooltip-text_contprop.txt

Horstmann

Zitat von Mitleser

@Horstmann

Ich habe mich erneut mit dem Thema beschäftigt und bin zu folgendem Ergebnis gekommen:

JavaScript

(function () {
    let css = `
tooltip[label*=" "],
#tabbrowser-tab-tooltip,
.places-tooltip {
    display: none !important;
}
#remoteBrowserTooltip{
    display: flex !important;
}
    `;
    let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Vielen Dank, das scheint im Prinzip hier zu funktionieren!

Allerdings musste ich 2 Änderungen machen, weil einige Tooltips nicht angesprochen waren, und einige Objekte im Überhangsmenü und Erweiterungsmenü ein gestörtes Hoververhalten gezeigt haben (Menü hat sich bei Hover geschlossen).

Also tooltip dazugenommen, tooltip[label*=" "] in tooltip[label] geändert.

Das Überhangsmenü und Erweiterungsmenü scheint beim ersten Öffnen aber immer noch etwas Probleme zu machen, schliessen sich bei Hover.

Sieht jetzt als Test so aus, mit deinem variierten Code und etwas von Mira_Belle (Dankeschön )

JavaScript

// browser.chrome.toolbar_tips  true
// Test2a

(function () {
    let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);      
    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`

        tooltip, 
        tooltip[label],
        #tabbrowser-tab-tooltip, 
        .places-tooltip {
            display: none !important;
        }

        #remoteBrowserTooltip {
            display: flex !important;
        }

    `), null, null);
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Mitleser

Scheint irgendwie Betriebssystemabhängig zu sein. Bin auf LIN. Bei tooltip[label] wird nichts angesprochen, es muss schon tooltip[label*=" "] sein. tooltip habe ich schlicht vergessen.

Dieses Prob kann ich hier nicht nachvollziehen:

Zitat von Horstmann

Das Überhangsmenü und Erweiterungsmenü scheint beim ersten Öffnen aber immer noch etwas Probleme zu machen, schliessen sich bei Hover.

Das kann ich hier nicht feststellen. Egal wie ich das css in js einbette ('Methode Endor' oder wie ich es gemacht habe ). Das macht hier keinen Unterschied und bereitet keine Probleme.

Sören Hentzschel

Zitat von Mitleser

es muss schon tooltip[label*=" "] sein.

Der Selektor spricht aber ausschließlich Tooltips an, welche ein Leerzeichen im Label beinhalten.

Mitleser

Ja. Und tooltip[label] sollte die richtige Syntax sein. Funktioniert hier bloß nicht. Hier ein Screenshot mit einem Text ohne Leerzeichen:

Das geht:

CSS

tooltip[label*=" "] {
    appearance: none !important;
    background-color: #3f3f3f !important;
    color: #F9F9F9 !important;
    font-size: 12px !important;
    line-height: unset !important;
    border: 1px solid #b03b0099 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    padding: 3px 7px 5px 7px !important;
}

Alles anzeigen

Das nicht:

CSS

tooltip[label] {
    appearance: none !important;
    background-color: #3f3f3f !important;
    color: #F9F9F9 !important;
    font-size: 12px !important;
    line-height: unset !important;
    border: 1px solid #b03b0099 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    padding: 3px 7px 5px 7px !important;
}

Alles anzeigen

Finde den Fehler.

Mira_Belle

Mitleser

Du hast da ein paar verdammt coole Symbole

Kannst Du mir mitteilen, woher Du die bezogen hast?

Mitleser

Mira_Belle

Die Icons habe ich quasi im Vorbeigehen eingesammelt.

Aber eine umfangreiche freie Quelle für .svg's ist:

Material Design Icons - Icon Library - Pictogrammers

The original. Following Google's Material Design guidelines for system icons, MDI is our largest library, touting over 7200 unique icons!

pictogrammers.com

(nicht von 'Material Design Icons' täuschen lassen...)

grisu2099

Dein Link funktioniert nicht...

Mitleser

Danke, habe ich geändert.

Mira_Belle

Zitat von Mitleser

...
(nicht von 'Material Design Icons' täuschen lassen...)

Wow.

Eine letzte Frage noch, weil ja eigentlich offtopic, hast Du alle Symbole einzeln angesprochen um sie "einzufärben"?

Tooltips nur für die Bedienoberfläche ausschalten?

Ähnliche Themen

userChrome.js Scripte für den Fuchs (Diskussion)

Webseite schmaler machen, Hilfe dabei

Google Chrome: Support-Ende für Windows 7 und Windows 8.1 im Februar 2023 – Firefox im August 2023?

Erweiterte Tooltips (Proton)...