0
このコードを使用してAngularJSでツールチップを作成しました。私は私のツールチップの背景を変更したい。私は私のツールチップの内容の黒い背景を望んでいません。また、私はツールチップの形状を変更したい。これを行う方法？私はいくつかのCSSコードを試しましたが、それは奇妙な結果を与えていません。AngularJSのカスタムツールチップ
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 {
\t animation: zoomInInfinitef 1s;
\t -webkit-animation: zoomInInfinitef 1s infinite;
\t -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">
\t <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>