AngularJs überschreiben tooltip von bootstrap.css-Stil

Ich bin mit AngularUI-Tooltip in einer Richtlinie wie unten beschrieben.

app.directive('customTooltip', function($compile) {
    return {
        link: function(scope, element, attrs) {
        var config = scope.$eval(attrs.appsTooltip);
        var htmlText = '<img src=\'../../../images/help_on.jpg\' tooltip="' + config.message + '" tooltip-placement="' + config.placement + '" />';
        element = element.append(htmlText);
        $compile(element.children())(scope);
    }
};

});

Statt einer änderung der tatsächlichen bootstrap.css-Klasse wie

.tooltip-inner, .tooltip.top .tooltip-arrow ,etc

Wie kann ich mit der gleichen Richtlinie zu überschreiben, mit inline-tooltip-styling?

InformationsquelleAutor ove | 2014-08-13
  1. 1

    Anstatt zu versuchen, fügen Sie in inline-Stile, fügen Sie einfach die Klasse, um eine eigene css-Dateien (dh anlegen eines bootstrap-überschreiben.css) und ändern Sie die Eigenschaften, die Sie ändern möchten. Möglicherweise benötigen Sie entweder !important nach den Wert der Eigenschaft, um sicherzustellen, es überschreibt die andere, oder verwenden Sie eine höhere Spezifität

    Mit !important

    .tooltip-inner {
    width:150px !important;
}

    Mit einer höheren Spezifität 

    .someParentElementClass img.tooltip-inner {
    width:150px;
}

    Artikel auf Spezifität

    Brauchen Sie nicht zu ändern, der boostrap-Dateien. Die css-Klassen sind nicht einmal die in der js-Datei, die Sie erwähnen, in den Kommentaren, das ist nur die Einstellung das class-Attribut auf das element.

    Alles, was Sie tun müssen ist, erstellen Sie eine neue css-Datei, setzen Sie den Stil, den Sie möchten, überschreiben Sie in es in es und verwenden Sie entweder die !wichtig Flagge, oder an der höheren Spezifität überschreiben, die bootstrap styles

    bootstrap-überschreiben.css

    .tooltip-inner {
    width:150px !important;
}

.tooltip.top {
    top:-100px !important;
}

    Dann in Ihre html-schließt die Datei nach der boostrap-Dateien

    <head>
   <link rel="stylesheet" href="/boostrap.css" />
   <link rel="stylesheet" href="/boostrap-override.css" />
</head>

    Dies ist alles, was Sie haben sonst nichts zu tun. Und so lange wie Sie die richtige Spezifität oder !important die Stile werden übernommen.

    • Meinst du kopieren und einfügen von bootstrap.css in bootstrap-überschreiben.css und ändern Sie die Eigenschaften? Ich dachte es gibt einen besseren Weg
    • Nein nicht copy paste aus der boostrap css-Datei einfach eine neue css-Datei und legen Sie in die Klassen Sie überschreiben will
    • Wenn ich das Tue, dann ich würde verwenden müssen !wichtig innen ui-bootstrap-tpls-0.10.0.js da hier die css-Klasse definiert ist, aber ich will nicht zu ändern ui-bootstrap-tpls-0.10.0.js
    • Sehen, Bearbeiten, brauchen Sie nicht zu Bearbeiten boostrap-Dateien auf allen
    InformationsquelleAutor Patrick Evans
Schreibe einen Kommentar