How to create a tooltip?

Question

I want to make a custom CSS class for tooltip which will wrap a string of length more than 25-30.Usually such a long text doesn't fit into the tootltip text area.

And is there anyway to do this using Tooltip (ui.bootstrap.tooltip) ? Like using custom CSS class to get the desired output.

This is the simple css tooltip - Plunker DEMO

Here is the code Snippet for the same :

Answer 1

The CSS Solution

There is a very simple solution to the problem at hand. What I essentially added is the following CSS code

word-wrap:break-word;

to the class that surrounds your tooltip text.

Here is a working demo

Also, this is a good read

What if I am using Angular UI?

For styling a tooltip from angular ui, I added tooltip-class="tooltip" to the tooltip code.

Here is a working demo with angular

This is a modified plunkr obtained from the Angular UI documentation