AngularJS Display Tooltip Content of Array of Strings / With HTML

Question

HTML (Jade):

a(href='#', data-placement='right', title="{{ someArrayOfStrings }}" tooltip)

where someArrayOfStrings is declared given a value during initialization in my angular controller:

Angular:

var myController = function($scope) {
    $scope.initialize = function(someArrayOfStrings) {
        $scope.someArrayOfStrings = someArrayOfStrings;
    }
};

var tooltip = function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                $(element).tooltip('show');
            }, function(){
                $(element).tooltip('hide');
            });
        }
    };
};

Currently, this would give my tooltip content such as the following:

["string1","string2","string3"]

which is ugly as hell and totally NOT what I want.

What I want displayed is something like this:

string1
string2
string3

I have searched around and it seems like there are quite a few approaches to this but so far, I have not managed to get it to work nicely, e.g. http://jsfiddle.net/superscript18/fu7a2/6/, http://jsfiddle.net/WR76R/ and Render Html String in tooltip.

Alternatively, I could perhaps use a concatenated string delimited by <br/> tags. This would require that my tooltips accept HTML tags, however. There seems to be an tooltip option available, i.e. html: true, but I can't get it to work.

Ideas / Help?

Demo fiddle @ jsfiddle.net/zr89sq6L/6/

It's Angular; see http://stackoverflow.com/questions/20666900/using-bootstrap-tooltip-with-angularjs, @StepanKasyanenko — Tacocat, Mar 03 '16 at 04:59
Are you trying `$(element).tooltip({html: 'true', container: 'body'})`? — Stepan Kasyanenko, Mar 03 '16 at 05:10
Maybe it's better to use a `bootstrap` intended for `angular`? See this [angular-strap](http://mgcrea.github.io/angular-strap/#/getting-started). — Stepan Kasyanenko, Mar 03 '16 at 05:11
I know of angular UI: https://angular-ui.github.io/, but after some consideration, decided not to use it, mainly because my project is not entirely in angular, and because it is a little too late to be switching now, :/. — Tacocat, Mar 03 '16 at 05:51
jsfiddle.net/zr89sq6L/10/, @StepanKasyanenko Oddly, the tooltip works even without the directive; it doesn't work on my webapp without the directive though... (Or rather, it does, but it is just like the black thing you see in the fiddle, and not the nice red I changed it to in my CSS) — Tacocat, Mar 03 '16 at 06:17

Stepan Kasyanenko · Accepted Answer · 2016-03-03T09:30:47.863

Try this solution jsfiddle.

First, create directive that create tooltip $(element).tooltip({html: 'true'}).
Second, use stringArray.join('<br>') create string with br.

Example:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.name = 'Superhero';
    $scope.stringArray = ["string1", "string2", "string3"];

  })
  .directive('tooltip', function() {
    return {
      restrict: "A",
      link: function(scope, element) {
        $(element).tooltip({
          html: 'true'
        });
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    Hello, {{name}}!
    <div ng-repeat="string in stringArray">
      {{ string }}
    </div>
    <a href="#" data-placement="right" title="{{ stringArray.join('<br>') }}" tooltip>tooltip</a>
  </div>
</div>

It works on the fiddle, but not on my webapp, :( My strings just look like this: `string1
string2
string3`. It is still not rendering the HTML. — Tacocat, Mar 03 '16 at 08:45
I realized smth funny. The `.run` is making a weird tooltip div appear on the top left hand corner of my webapp and it says my page title (not "string1" etc.) Also, I have no idea when it appears and disappears. Looks very strange and random. It also changes the title on my browser tab, O_O. Any idea why?? My tooltips are inside body > container > some rows and columns > panel body. — Tacocat, Mar 03 '16 at 09:05
Hey, that worked! Strange! Cause I thought I tried this before but it didn't work :S Maybe I made a typo back then T_T Thank you so much! :) @Stepan Kasyanenko — Tacocat, Mar 07 '16 at 00:23

score -1 · Answer 2 · answered Mar 03 '16 at 08:26

-1

You just need to set the title property like title="{{ stringArray.join('\u000A') }}". Please check the fiddle http://jsfiddle.net/Noblemo/u9tt9xb2/

answered Mar 03 '16 at 08:26

NOBLE M.O.

194
1
2
15

It works on the fiddle, but not on my webapp, :( My strings just look like they are delimited/joined by spaces rather than new lines, e.g. `string1 string2 string3`. – Tacocat Mar 03 '16 at 08:44
Fyi, I am using Firefox :/ but still it doesn't show as new lines. – Tacocat Mar 03 '16 at 08:50
Which is the version of firefox? – NOBLE M.O. Mar 03 '16 at 08:52
Could you please try \n or \x0A instead of \u000A? – NOBLE M.O. Mar 03 '16 at 09:02
I tried both and both don't work, :S @NOBLE M.O. Version 44.02 on Ubuntu 14.04. – Tacocat Mar 03 '16 at 09:04

AngularJS Display Tooltip Content of Array of Strings / With HTML

2 Answers2