Anton Anton - 6 months ago 41
Javascript Question

Icons inside tooltips

I'm trying to put icons inside tooltip, but something is wring. The idea is user see some colored box which means different events, inside of this box he sees for example number 3, this number means amount of actions which he has to do. When user hovers on this box he has to see tooltip with icons. For tooltip rendering, I'm using jBox, but it won't to show my icons, it shows only title. Could somebody explain me my mistake?
For best understanding I did simple example:

My code:

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

According to jBox's documentation, you are incorrectly setting the jBox:

Your code:

$('.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')
});

The way it should be according to their 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.