ブートストラップでツールチップをカスタマイズする方法4

Question

Bootstrap '4.0.0-alpha.6'を使用していて、ツールチップのスタイルをカスタマイズしてカスタマイズしようとしています。今、私はBootstrap 4を使用しています。また、カスタムCSSクラスも追加しました。しかし、マウスを動かしている間は私のカスタムスタイルに応じて反応しません。

HTML

<span data-toggle="tooltip" data-placement="top" title="Testing tooltip with custom style" class="red-tooltip" (click)="nodeion(node)"> 
    some text 
</span> 

CSS

.red-tooltip + .tooltip-top > .tooltip-inner { 
    background-color: #f00; 
    padding: 10px; 
    font-size: 14px; 
} 

しかし、この更新した後、それは変化当たりとして反映され、それはSTILブートストラップのデフォルトのスタイルを示しています。 助けてください。

Answer 1

あなたが生成されたツールチップの要素が直接の兄弟あなた.red-tooltipの+ではないので、ここではgeneral sibling ~セレクタを必要とする：SCSSで

.red-tooltip ~ .tooltip > .tooltip-inner 

それは次のようになります。

.red-tooltip { 
    &~.tooltip { 
    &>.tooltip-inner { 
     /* your custom styles */ 
    } 
    } 
} 

この作業を参照してください。例：

$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip() 
 
})

body { 
 
    padding: 5em; 
 
} 
 

 
.red-tooltip ~ .tooltip > .tooltip-inner { 
 
    background-color: #f00; 
 
    padding: 10px; 
 
    font-size: 14px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<span data-toggle="tooltip" data-placement="top" title="Testing tooltip with custom style" class="red-tooltip" (click)="nodeion(node)">some text</span>

Answer 2

// Initialize tooltip component 
 
$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip() 
 
}) 
 

 
// Initialize popover component 
 
$(function() { 
 
    $('[data-toggle="popover"]').popover() 
 
})

.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#f2f2f2 !important;border-radius:.25rem}

<title>My Example</title> 
 

 
<!-- Latest compiled and minified Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<style> 
 
body { 
 
padding-top: 1em; 
 
} \t 
 
</style> <div class="container-fluid"> 
 
\t \t 
 
<p style="margin:40px;">Check out my <a target="_blank" href="https://www.quackit.com/css/grid/tutorial/" data-toggle="tooltip" data-placement="top" title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you might need it!</p> 
 

 
</div> 
 
\t <span data-toggle="tooltip" class="red-tooltip" data-placement="top" title="Testing tooltip with custom style" class="red-tooltip" (click)="nodeion(node)">some text</span> 
 
\t 
 
<!-- jQuery library --> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 

 
<!-- Popper --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 

 
<!-- Latest compiled and minified Bootstrap JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>