current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

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/

share|improve this question
    
Used in directive .tooltip - tooltip is jquery? – Stepan Kasyanenko Mar 3 at 3:58
    
It's Angular; see stackoverflow.com/questions/20666900/…, @StepanKasyanenko – Tacocat Mar 3 at 4:59
    
Are you trying $(element).tooltip({html: 'true', container: 'body'})? – Stepan Kasyanenko Mar 3 at 5:10
    
Maybe it's better to use a bootstrap intended for angular? See this angular-strap. – Stepan Kasyanenko Mar 3 at 5:11
    
Can you create a jsFiddle? – Stepan Kasyanenko Mar 3 at 5:13
up vote 1 down vote accepted

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>

share|improve this answer
    
It works on the fiddle, but not on my webapp, :( My strings just look like this: string1<br>string2<br>string3. It is still not rendering the HTML. – Tacocat Mar 3 at 8:45
    
Could I ask you why this doesn't work?: jsfiddle.net/zc7dbj67 – Tacocat Mar 3 at 8:59
    
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 3 at 9:05
    
I'm update my answer. Please check. – Stepan Kasyanenko Mar 3 at 9:28
    
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 7 at 0:23
up vote 0 down vote

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

share|improve this answer
    
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 3 at 8:44
    
Fyi, I am using Firefox :/ but still it doesn't show as new lines. – Tacocat Mar 3 at 8:50
    
Which is the version of firefox? – NOBLE M.O. Mar 3 at 8:52
    
Could you please try \n or \x0A instead of \u000A? – NOBLE M.O. Mar 3 at 9:02
    
I tried both and both don't work, :S @NOBLE M.O. Version 44.02 on Ubuntu 14.04. – Tacocat Mar 3 at 9:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.