Javascript AngularJS：向角度等级图标添加工具提示？

我正在使用生成一个星体系统

<div class="rating-filter">
    <h4>{{'Rating: '|translate}} {{filter.ratings}}</h4>
    <div data-angular-rating-icons 
    ng-model="filter.ratings" color-base="orange"
    on-change="fn()"></div>
</div>

我似乎无法理解这一点，因为

角度评级图标

采用

字符串

来确定哪个图标将用于评级系统，即

icon full=“fa star”

，而不是传递

对象。而且我似乎不能针对单个星星，因为它们是生成为缩小CSS的

我试图覆盖

.fa star

的css，但这似乎也不太管用。有没有办法为每个按钮在悬停时显示工具提示

JSFiddle：

---

要加载插件，您可能必须点击代码段的

加载类型

，

无换行-底部。
Q：是否有办法在悬停时为每个按钮显示工具提示

A：是-我们将工具提示类添加到
。。。正是这个元素重复了10次，在每颗星上重复了两次

以下是在css中添加工具提示类的工具提示代码片段


var-app=angular.module（“myApp”，[]）；
应用指令（‘成角’，函数（）{
返回{
替换：正确，
要求：'ngModel'，
范围：{
ngModel:“=”，
onChangeFunction:“&onChange”
},
模板：“”+
“
”+
“
' +
'用于{{$index}}的工具提示文本示例'+
'' +
“
”+
“
”，
链接：功能（范围、元素、属性、控制器）{
//背景
scope.icons=新数组（+attrs.max | 5）；
scope.value=控制器.$viewValue | |（+attrs.defaultValue | | 0）；
scope.size=+attrs.iconSize | | 20；
scope.spating=+attrs.iconspating | | 5；
scope.listClass=‘角度额定图标’；
scope.readOnly=！（attrs.readOnly==未定义）；
scope.decimal=！（attrs.decimal==未定义）？“角度额定图标十进制”：未定义；
//颜色
var colorBase=attrs.colorBase | |“黑色”；
var colorSelected=attrs.colorSelected | |“橙色”；
var colorHover=attrs.colorHover | | |“橙色”；
//不同的国家
var iconBase=attrs.iconBase | | |‘fa’；
var iconEmpty=attrs.iconEmpty | | fa-star-o |；
var iconFull=attrs.iconFull | | fa star |；
var iconHover=attrs.iconHover | | fa star |；
//模型
控制器。$render=function（）{
scope.value=控制器。$viewValue==0？0:控制器。$viewValue | | scope.value；
//更新模型保护/回退（如果之前未初始化）
控制器.$setViewValue（scope.value）；
};
/**
*返回图标的相应类。
*如果它是满的或空的，则会更改。
*高于给定值的所有索引将为空，低于或等于该值的所有索引将为满。
*
*@param{int}index-图标的索引
*@return{string}-要使用的图标类
*/
scope.getClass=函数（索引）{
返回iconBase+''+（索引>=scope.value？iconmpty:iconFull）；
};
/**
*返回图标颜色的适当样式。
*如果它是满的或空的，则会更改。
*如果是十进制类型，则修改样式以将图标大小减小2倍，并移动奇数索引图标
*他们的一半大小减去2，在左边。
*
*@param{int}index-图标的索引
*@return{Object}-要使用的图标样式
*/
scope.getIconStyle=函数（索引）{
变量css={
颜色：索引>=scope.value？colorBase:colorSelected
};
如果（！scope.decimal）{
返回css；
}
css.height=scope.size-2+‘px’；
css.width=scope.size-2+‘px’；
css.left=索引%2？'-'+（scope.size-2）/2+'px'：''；
返回css；
};
/**
*返回列表项的字体大小和右边填充的适当样式。
*如果是decimal类型，则修改样式以将高度和宽度减少2 px，并且仅减少宽度
*同样，对于每个偶数索引，它会删除正确的填充。
*
*@param{int}index-列表项的索引
*@return{object}-要使用的列表项的样式
*/
scope.getListItemStyle=函数（索引）{
变量css={
“字体大小”：scope.size+“px”，
“右填充”：索引！==scope.icons.length-1？scope.spating+'px'：'0'
};
如果（！scope.decimal）{
返回css；
}
css.height=scope.size-2+‘px’；
css.width=（scope.size-2）/2+‘px’；
如果（！（索引%2））{
css['padding-right']='0'；
}
返回css；
};
/**
*如果设置为只读，则不运行。
*将指令的作用域值设置为单击的图标加1。
*列表项的索引从0到9，而实际值应该从1到10。
*将模型值设置为指令的范围值。
*运行onchange函数。
*
*@param{int}index-单击图标的索引
*/
scope.setValue=函数（索引）{
if（scope.readOnly）{
返回；
}
控制器.$setViewValue（scope.value=index+1）；
scope.onChangeFunction（）；
};
/**
*运行paintIcon函数以仅绘制当前范围值-1的图标，
*因为索引的范围是0到9，但实际值的范围是1到10。
*/
scope.resetIcons=函数（）{
scope.paintIcons（scope.value-1，true）；
<div class="btn-group">
    <button type="button" class="btn btn-price" uib-tooltip="₹0 - ₹500" ng-click="applyFilter(1)">$</button>
    <button type="button" class="btn btn-price" uib-tooltip="₹500 - ₹1000" ng-click="applyFilter(2)">$$</button>
    <button type="button" class="btn btn-price" uib-tooltip="₹1000 - ₹5000" ng-click="applyFilter(3)">$$$</button>
    <button type="button" class="btn btn-price" uib-tooltip="₹5000+" ng-click="applyFilter(4)">$$$$</button>
</div>