bootstrap tooltip - use jquery to dynamically change css & placement

Question

I am using Bootstrap v3.3.5 and JQuery v1.11.3 .

I have a select list that when a value is selected, I would like the placement and css class of a tooltip to change.

I have searched Google & SO and read many SO posts, but the many attempts I have made fail. For example, this did not work for me.

Here is my html code:

<select id="id_cover_letter_type" name="cover_letter_type">
    <option value="0" selected="selected">I will write my own data</option>
    <option value="1">Standard Cover Letter</option>
    ....
</select>

<i id="id_icon_id_cover_letter_details_second_paragraph" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop" data-original-title="" title="" aria-describedby="tooltip229278"></i>

Here is my jquery code:

I have included the commented out attempts that I have made to change the data-placement of the tooltip (taken from other posts) that did not work for me.

$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'html': true, 'placement': 'bottom', 'title': '{% trans "Paragraph 2" %} <br /><br /> {% trans "This should detail why you want the job." %} <br /><br /> {% trans "Explain how your qualifications and career plan match the advertised position." %} <br /><br /> {% trans "The details you provide here should display that you have researched the employer, what the employer and industry are seeking and that you understand what the job requires." %}'});

if ( $('#id_cover_letter_type').val() == '0' ) {

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'left';

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'left' });

    // the following, destroying, appling the placement and then showing the tooltip did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'left'});
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

    // applying the placement and the showing the tooltip did not work.
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'left'}).tooltip('show');

} else {

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'bottom';

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'bottom' });

    // the following, destroying, appling the placement and then showing the tooltip did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'bottom'});
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

    // applying the placement and the showing the tooltip did not work.
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'bottom'}).tooltip('show');

}

Also, if someone can tell me the answer to change the css of the tooltip to class name custom-tooltip-styling123, that would be fantastic.

EDIT

Here is a jsfiddle. This is only my 2nd fiddle, and I don't know how to add in the bootstrap to make the tooltip display.

So when you select a option the tooltip class will be changed? — Jim Fahad, Dec 01 '15 at 04:48
Jim Fahad, yes tooltip class and tooltip data-placement will change. — user1261774, Dec 01 '15 at 04:58
you can learn more about -The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element:http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp — Codeone, Dec 03 '15 at 07:21

score 5 · Accepted Answer · edited May 23 '17 at 12:31

The main problem

You forgot to add id="id_icon_id_cover_letter_details_second_paragraph" to your img element.

Also you need to wrap your js code by the following one:

$(function () { // On document ready wrapper
    // your code ...
});

And the last point is to add tooltip initialization:

$('#id_icon_id_cover_letter_details_second_paragraph').tooltip();

For full code just check this jsfiddle

How to change css of tooltip

There are several solutions you can find on stackoverflow, like this for example.
tooltip has option template which default value is:

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

You can add CUSTOM_CSS and pass updated version of this option, for example:

'<div class="tooltip CUSTOM_CSS" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Or you can define your own css rules for .tooltip class.

Actually there are more solutions. It's your choice, choose one of them. You know html structure and classes of tooltip element, so manipulate it as you wish.

For more info about template option requirements check the official documentation here

Rashad, thanks. I was looking at this so long I could no longer see the error. Do you know how to change the css of the tooltip, so I can change the width between the different placements? — user1261774, Dec 01 '15 at 06:20
Oh, you edited your comment. So to change width you just need to define it in css rule. For example `.tooltip.right { width: 300px; }` will change width for the right placement, and `.tooltip.bottom { width: 300px; }` will change width for the bottom placement, and the same thing for the left and top placements. — Rashad Ibrahimov, Dec 02 '15 at 05:26

bootstrap tooltip - use jquery to dynamically change css & placement

1 Answers1