Custom tooltip in AngularJS

Question

i have made tooltip in AngularJS using this code. I want to change the background of my tooltip. I don't want black background of my tooltip content. Also i want to change the shape of tooltip. How to do this? i tried some css codes but its not giving desird result.

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>

valverde93 · Accepted Answer · 2016-04-12 09:08:45Z

1

To use tooltip-class and customize tooltips you need to update ui-bootstrap-tpls to at least 13.0 version.

Please, follow the links and compare the tooltip docs of the versions 0.12 and 0.13

Here is the JSFiddle example of the customization

answered Apr 12, 2016 at 9:08

valverde93

1,6981 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex A. · Accepted Answer · 2016-04-12 08:49:07Z

1

Technically, tooltip directive allows you to setup almost anything starting from class and even set your own template. see docs: https://angular-ui.github.io/bootstrap/#/tooltip.

Once you set your class, for example, your are more than welcome to define anything you want for it. But, I would not suggest overriding the definitions of bootstrap provided classes. You will create more problems with it for yourself.

answered Apr 12, 2016 at 8:49

Alex A.

2,6204 gold badges42 silver badges83 bronze badges

Collectives™ on Stack Overflow

Custom tooltip in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related