Question

我试图将图标放在工具提示中，但有些东西正在扭曲。这个想法是用户看到一些彩色的盒子，这意味着不同的事件，在这个盒子里面他看到例如3号，这个数字意味着他必须做的动作量。当用户在这个盒子上盘旋时，他必须看到带有图标的工具提示。对于工具提示渲染，我使用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.

工具提示里面的图标

1 个答案: