Access bootstrap tooltip title attribute using jquery

Question

How in jquery do I get/set the title attribute of a bootstrap tooltip.

<span data-toggle="tooltip" title="a,b,c,d">Something</span>

... and ...

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();

    $('.CustomToolTip').each(function () {
            alert($(this).attr('data-toggle'));
            alert('[' + $(this).attr('title') + ']');
            //$(this).attr('title', $(this).attr('title').replace(/,/g, ',&#8203;'));
    });
});

and I have tried:

...
    $('.CustomToolTip').on('show.bs.tooltip', function () ...

...which implies I am using the incorrect attribute or code!!??!!

In reference to Why doesn't break word work on a long string with commas? my eventual purpose is because my title has no spaces and can be quite long I need to append to the comma a non-whitespace space (char U+2008 in Unicode, or &#8203) (the line I have commented out). In reality the title is set in the VB.NET code-behind and is a asp.net Label control that gets rendered as a span tag and if I do a replace in the VB.NET code a funny character appears (well at least in IE) in the front-end. So I decided to do it in jQuery client side as other's have suggested however, my title attribute is blank (NB: the first alert box call shows value of "tooltip" the second is blank between the square brackets)!

For e.g. say my tooltip is a fruit list "apple,banana,cherry,date" and my max-width is a width of 11 characters then my tool tip is rendered as:

apple,banan
a,cherry,da
te

however; what I wont is:

apple,
banana,
cherry,date

i.e. it does not break in the middle of a word.

My css is:

.CustomToolTip + .tooltip.right > .tooltip-inner {
    max-width: 400px;
    background-color: #333333;
    color: #bbbbbb;
    word-wrap: break-word;
    border-radius: 8px;
}
.CustomToolTip + .tooltip.right > .tooltip-arrow {
    border-right-color: #333333;
}

Can someone please point my mistake out for me - thanks?

score 0 · Answer 1 · answered May 20 '15 at 10:37

0

Get title Attribute

$('[data-toggle="tooltip"]').attr("title");

Set title Attribute

$('[data-toggle="tooltip"]').attr( "title", "New Value" );

For Reference: http://api.jquery.com/attr/

answered May 20 '15 at 10:37

Viraj Sanghavi

96
5

not sure if this meets my purpose as I just want items that are using my CustomToolTip class. And besides this is the exact answer I have already provided in the part I have commented out. I am just saying the value is blank and it should not be, i.e. even if I change it, the value I have set in VB.NET code seems to overwrite it. I would have thought the jquery on-ready function would have the last say. – Glen May 21 '15 at 00:11

score 0 · Answer 2 · answered May 20 '15 at 13:18

0

If your goal is just to convert white space, a trick is to convert them (server side) to  

Or actually change the CSS of the tooltip popup.

answered May 20 '15 at 13:18

the_lotus

12,668
3
36
53

@the-lotus I have already tried this but not what I require, i.e. I do not want to show spaces in the tooltip but I do want a space for the purpose of word breaking. Currently if no spaces are there it will break on the last character that fits based on the max-width setting in the CSS which looks ugly when viewing the tooltip so the idea of inserting non-space spaces (which is not but is ). Also when using VB.NET ChrW function the character is still seen as a funny character so if your other suggestion to use CSS can you give me the CSS? – Glen May 21 '15 at 00:19

score 0 · Accepted Answer · edited May 23 '17 at 11:58

As usual if you search hard enough you find what you are looking for. Credit goes to @yann-chabot changing the title of a popover with bootstrap and jquery and I found this useful site that is all about uni-code space characters as well https://www.cs.tut.fi/~jkorpela/chars/spaces.html.

The solution was to use the 'data-original-title' attribute and not the 'title' as follows :

...
var newTitle = $('.CustomToolTip').attr('data-original-title');
newTitle = newTitle.replace(/,/g, ',\u200A');
$('.CustomToolTip').attr('data-original-title', newTitle);

I decided to use Unicode 200A for the space character because it gave me less space!! I believe it is something to do with the font you are using and it is giving me in my case approximately 1 pixel of space after the comma, enough for the "word-wrap: break-word" css to work - hooray!

Access bootstrap tooltip title attribute using jquery

3 Answers3