Question

我使用此代码在AngularJS中制作了工具提示。我想改变工具提示的背景。我不想要工具提示内容的黑色背景。我也想改变工具提示的形状。这该怎么做？我尝试了一些css代码，但它没有给出非常好的结果。

＆＃13;

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  
});

＆＃13;

.round-button {
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #ff9900;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #cccc00
;
}

.zoomInInfinite {
	animation: zoomInInfinitef 1s;
	-webkit-animation: zoomInInfinitef 1s infinite;
	-moz-animation: zoomInInfinitef 1s infinite;
}
@keyframes zoomInInfinitef {
 from {
 opacity: 0;
 transform: scale3d(.3, .3, .3);
}
 50% {
 opacity: 1;
}
}
@-webkit-keyframes zoomInInfinitef {
 from {
 opacity: 0;
 -moz-transform: scale3d(.3, .3, .3);
 -webkit-transform: scale3d(.3, .3, .3);
}
 50% {
 opacity: 1;
}
}

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

	  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <!-- Styles -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Scripts -->
    <script src="https://code.angularjs.org/1.2.20/angular.js"></script>
    <!-- <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>-->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
        <script src="app.js"></script>
    
  </head>

  <body ng-controller="MainCtrl">
    <div class="container text-center">
      <button type="button" class="round-button zoomInInfinite" 
          data-toggle="tooltip" 
          tooltip="this is my tooltip"
          tooltip-placement="right" >
         
      </button>
          
    </div>

    
  </body>

</html>

＆＃13;

Answer 1

从技术上讲，tooltip指令允许您从类开始设置几乎任何东西，甚至可以设置自己的模板。请参阅文档：https://angular-ui.github.io/bootstrap/#/tooltip。

例如，一旦你设置了课程，我们非常欢迎你为它定义任何你想要的东西。但是，我不建议覆盖bootstrap提供的类的定义。你会为自己制造更多问题。

Answer 2

要使用tooltip-class并自定义工具提示，您需要将ui-bootstrap-tpls更新为至少13.0版本。

请按照链接并比较版本0.12和0.13

的工具提示文档

Here是自定义的JSFiddle示例

AngularJS中的自定义工具提示

2 个答案: