Question

使用Bootstrap＆＃39; 4.0.0-alpha.6＆＃39;我试图更新工具提示样式来自定义它。现在，我使用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;
}

但是，在此更新之后，它会根据更改进行反映，它显示默认的bootstrap样式。有什么帮助吗？

Answer 1

您需要general sibling ~选择器，因为生成的工具提示元素不是您+的直接同级.red-tooltip：

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

在SCSS中，它将是：

.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

.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;
}	
</style> <div class="container-fluid">
		
<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>
	<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>
	
<!-- 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>

{{1}}

如何在bootstrap 4中自定义工具提示

2 个答案: