Bootstrap tooltip's data-placement is not working when changed dynamically using AngularJS
Question
When I open the page, the first time I hover the mouse cursor over the list of paragraphs ( q1 , q2 , q3 , q4 ), the tooltip 's data-placement attribute is set to be on the left side.
Expecting: when I click on "Expand View" link, I'm calling a method changePlacement where I'm changing the scope value of $scope.changeDataPlacement to 'right' , but data-placement is not changing to 'right' ...
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.items = ['q1', 'q2', 'q3', 'q4']; $scope.changePlacement = function() { $scope.changeDataPlacement = 'right'; console.log($scope.changeDataPlacement); alert("data-placement@ right side:" + $scope.changeDataPlacement); }; $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); });
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <div ng-app="myApp" align="center" ng-controller="myCtrl"> <a href="javascript:;" ng-init="watchlistexpand = null;changeDataPlacement='left'" ng-click="watchlistexpand = !watchlistexpand; changePlacement();" title="{{ watchlistexpand ? 'Compact' : 'Expand'}} View">{{ watchlistexpand ? 'Compact' : 'Expand'}} View</a> <div ng-repeat = "item in items"> <a href="#" data-toggle="tooltip" data-placement="{{(changeDataPlacement === 'left')? 'left':'right'}}" title="Hooray!">{{item}}</a> </div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2018-01-07 15:45:00
The Problem:
This issue isn't really related to AngularJS, it's rather because of the way jQuery and Bootstrap work. In your code, changeDataPlacement is getting updated with the value 'right' when you click on "Expand View". And if you inspect the HTML, you'll see this data-placement="right" , which means it's rendered correctly by AngularJS.
The reason data-placement="right" is not taking affect is that Bootstrap's tooltip only considers the value of data-placement when it's initialized, which is on page load in your case. So even if you change the value of data-placement later programmatically (using Javascript, jQuery or AngularJS), it won't reflect this change on the tooltip itself.
The Solution:
To solve this issue you could either destroy the tooltip and initialize it again with the new placement (not recommended). Or better yet change the already initialized tooltip , like this:
$('#tooltip').data('bs.tooltip').options.placement = 'right';
This will work on a single tooltip , to change it in all of them you could do this:
$('[data-toggle="tooltip"]').each(function() {
$(this).data('bs.tooltip').options.placement = 'right';
});
You could put this in your changePlacement function, and it'll work fine like in this codepen .
Or you could do it The AngularJS Way , which is to $watch the changes of changeDataPlacement and run this snippet of code whenever its value changes. Like this:
$scope.$watch('changeDataPlacement', function(placement) {
$('[data-toggle="tooltip"]').each(function() {
$(this).data('bs.tooltip').options.placement = placement;
});
});
// Then in your function, you simply do this:
$scope.changePlacement = function() {
$scope.changeDataPlacement = 'right';
};
Here's a another codepen demonstrating the later implementation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.