我正在尝试将图标放入工具提示中,但有些问题。这个想法是用户看到一些彩色框,这意味着不同的事件,在这个框内他看到例如数字 3,这个数字意味着他必须做的 Action 的数量。当用户将鼠标悬停在此框上时,他必须看到带有图标的工具提示。对于工具提示渲染,我使用的是 jBox,但它不会显示我的图标,它只显示标题。有人可以解释我的错误吗? 为了最好的理解,我做了 simple example :
我的代码:
var app = angular.module("app", []);
app.controller("HomeCtrl", function($scope){
$('.green').jBox('Tooltip', {
title: 'Your actions is',
content: $('#actions')
});
$('.yellow').jBox('Tooltip', {
title: 'Your actions is',
content: $('#actions')
});
$('.red').jBox('Tooltip', {
title: 'Your actions is',
content: $('#actions')
});
$scope.objects = [
{
id: 1,
image: "icons/comments.png",
link: "action 1"
},
{
id: 2,
image: "icons/changes.png",
link: "action 2"
}
];
$scope.checkValue = function(){
for (var i = 0; i < $scope.objects.length; i ++){
alert("you have to do " + $scope.objects[i].link)
}
}
});
html
<div class="container-fluid">
<div class="row">
<hr>
<h1>Blood Pressure Check</h1>
<hr>
</div>
<div class="row">
<table class="table">
<tr>
<td>
<!--<img ng-src="icons/green.png" data-toggle="tooltip" title="class='fa fa-exclamation-triangle'"/>-->
<img class="green" ng-src="content/green.png"/>
</td>
<td>
<img class="yellow" ng-src="content/yellow.png" />
</td>
<td>
<img class="red" ng-src="content/red.png" />
</td>
</tr>
</table>
<div style="display: none" class="icons" ng-repeat="obj in objects">
<img id="actions" class="icon" ng-src="{{ obj.image }}" title="{{ obj.id }}" ng-click="checkValue()" />
</div>
</div>
最佳答案
根据 jBox 的 documentation ,您错误地设置了 jBox:
您的代码:
$('.green').jBox('Tooltip', {
title: 'Your actions is',
content: $('#actions')
});
$('.yellow').jBox('Tooltip', {
title: 'Your actions is',
content: $('#actions')
});
$('.red').jBox('Tooltip', {
title: 'Your actions is',
content: $('#actions')
});
按照他们的方式应该是documentation :
$('.green').jBox('Tooltip', {
title: 'Your actions is',
attach: $('#actions'),
content: '<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/comments.png">'
});
$('.yellow').jBox('Tooltip', {
title: 'Your actions is',
attach: $('#actions'),
content: '<img src="https://cdn4.iconfinder.com/data/icons/10-line-icons-set-for-ui-more/32/edit-01-128.png">'
});
$('.red').jBox('Tooltip', {
title: 'Your actions is',
attach: $('#actions'),
content: '<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/comments.png">'
});
关于javascript - 工具提示中的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37123448/