AngularJS中的自定义工具提示

Custom tooltip in AngularJS

本文关键字：工具提示 自定义 AngularJS      更新时间：2024-05-02

我用这段代码在AngularJS中制作了工具提示。我想更改工具提示的背景。我不想要我的工具提示内容的黑色背景。我也想改变工具提示的形状。如何做到这一点？我尝试了一些css代码，但没有给出理想的结果。

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
  
});
.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;
}
}
<!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>

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

请按照链接并比较版本0.12和0.13 的工具提示文档

以下是定制的JSFiddle示例

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

例如，一旦你设置了你的类，你就非常欢迎为它定义任何你想要的东西。但是，我不建议重写引导程序提供的类的定义。你会给自己制造更多的问题。

相关文章：