動的にブートストラップのパスワード強度を変更する方法パスワードのスコアに基づいてツールチップの色を

Question

登録ページにBootstrapのパスワード「strength-meter」プラグインを含めても問題ありません。しかし、私はこれを拡張して、それぞれのメッセージの色を変えたいと思います（成功、警告、危険警告の色に似ています）。現在、私はCSSをレッドにしか編集していません。 CSS要素を動的に変更することが可能かどうかを判断しようとしていますか？ここで

は、コンテナのdivの終わりに直接体内下記のコンテナのdivからページ開始のHTMLの部分である：ここで

<div class="container"> 

<?php if (isset($successMessage)) { ?> 
    <div class="alert alert-success text-center" role="alert"><strong>Success! </strong><?php echo $successMessage; ?> </div><?php } ?> 
<?php if (isset($redirectMessage)) { ?> 
    <div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="Redirecting" style="width:100%"><?php echo $redirectMessage; ?> </div></div><?php } ?> 
<?php if (isset($failMessage)) { ?> 
    <div class="alert alert-danger alert-dismissable fade in text-center" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error: </strong> <?php echo $failMessage; ?> 
    </div><?php } ?> 
<div class="password-fail"></div> 
<form id="registration-form" class="form-signin" method="POST"> 
    <h2 class="form-signin-heading">Register Account</h2> 
    <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon1">@</span> 
     <input type="text" name="username" class="form-control" placeholder="Username" required> 
    </div> 
    <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus> 
    <div class="col-lg-16" id="tooltip-viewport"> <!--containing viewport for tooltip --> 
    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required> 
    </div> 
    <input type="password" name="password2" id="verifyPassword" class="form-control" placeholder="Confirm" required> 
    <div class="button-container"> 
     <button id="register-button" class="btn btn-lg btn-primary btn-block disabled" type="submit">Register</button> 
     <div class="login-page-link-container"> 
      <a href="src/login.php" class="login-page-link">I'm already a member!</a> 
     </div> 
</form> 
</div> 

でそれをスタイリングです私のforms.cssファイル：

：

/* 
TOOLTIP FOR PASSWORD STRENGTH 
*/ 
.tooltip { 
font-size: 16px; 
} 
.tooltip-inner { 
background-color: red; 
color: white; 
} 

そして最後には、ここで私が書いたのJavascript機能です

$(document).ready(function() { 
    $('#inputPassword').strengthMeter('tooltip', { //#inputPassword is input id 
     hierarchy: { //tooltip hierarchy 

      '0': 'Your Password is Empty', 
      '1': 'You\'re kidding right?', 
      '10': 'Very Weak', 
      '20': 'Kinda Weak', 
      '30': 'Good', 
      '40': 'Strong', 
      '50': 'Very Strong' 
     }, 
     tooltip: { 
      viewport: '#tooltip-viewport'} //containing div for password input 
    }); 
}); 

もしそれができないのなら、それでいいです。私はダウンロードしたプラグインを検索し、GoogleとS.Oを介して検索しようとしました。私のコードがどのように設定されているかに関しては何も教えてくれませんでした。

ありがとうございました。

Answer 1

全くそれが根底にあるライブラリを変更することなく、可能ではありませんので（具体的には、tooltip.jsはこの機能を追加するために拡張する必要があるだろう）、ブートストラップの強度メーターにオプションまたはコールバックに建て

ソースはありません：http://davidstutz.github.io/bootstrap-strength-meter/