Use bootstrap twitter's tooltip to ember js application

1

Hi, sorry for my bad english I’m a french user of ember js. I want to use the tooltip function on twitter boostrap with my ember js application. I can use this feature when I specify for an item manually but I can’t it to all my overall application. It’s pretty boring annoying to have to manually specify each time. Someone can help me to do this ?

Thanks a lot !

2

If you want to declare your tooltips once, this is a good stackoverflow answer on how to do this: jquery - How do I bind Twitter Bootstrap tooltips to dynamically created elements? - Stack Overflow

If you want a little more control, you can attach tooltips to items in your DOM in the didInsertElement hook or when controller properties change.

If you find yourself repeating this code, maybe you can move it into a mixin and apply it to all of your views that need tooltips.

1 Like
3

Hi, that’s works with your solution but I can’t configure my tooltip function. When I do this :

$(‘body’).tooltip({ selector: ‘[rel=tooltip]’, placement:‘bottom’, html:true });

My tooltip stay in top of the element :cry:

4

As @yohsuzuki mentioned, you can initialise the tooltip in the didInsertElement hook of a view, I’ve created a simple view which you can use to initiate tooltip for a span in this jsbin http://jsbin.com/apagaz/1/edit. Hope this helps.

1 Like
5

This help me thank you but I’m not completely satisfied, I’m complicated :tongue:. I would like find a solution that work like a no javascript application.

In my other application I’m doing this :

<script type="text/javascript">
$(document).ready(function () {
    $("[rel=tooltip]").tooltip({placement:'bottom', html:true});
});

In my template file and when I want to display a tooltip I add this in my element :

<a href="myurl" title="mytitle" rel="tooltip">My link with tooltip</a>
6

You can take a look at https://github.com/chinchang/hint.css It doesn’t use JS at all, just pure CSS.

2 Likes