javascript - 工具提示中的图标

Question

我正在尝试将图标放入工具提示中，但有些问题。这个想法是用户看到一些彩色框，这意味着不同的事件，在这个框内他看到例如数字 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>

Answer 1

根据 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">'
});

Working example.