Bootstrap tooltip does't work when I use jQuery to append the tooltip elements

Question

how are you guys I have a question if anyone can help me, I'll be grateful.

at the moment I was using some bootstrap functionality, for example, this code below. I'm using bootstrap version 3

<div class="col-lg-12 col-md-12 col-xs-12  div_challenger" style="background-color: #somecolor; color:someTextColor;"
    data-toggle="tooltip" data-placement="right" title="some text here!!!">
    <span class="some icon"></span>
    <b>some title</b>
    <input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>

this code works well in html file. But when I use Jquery append element this doesn't work the same way

code using jquery append.

<button id="someid" onclick="addElement()"> ADD element </button>
<div id="addhere"> </div>

script tags

<script>
function addElement(){
   let ElementToAdd = `    <div class="col-lg-12 col-md-12 col-xs-12  div_challenger" style="background-color: #somecolor; color:someTextColor;"
    data-toggle="tooltip" data-placement="right" title="some text here!!!">
    <span class="some icon"></span>
    <b>some title</b>
    <input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>`
 $('#addhere').append(ElementToAdd)
}

if someone tells me why this occurs I will be totally grateful

Is it the tooltip that isn't working after you append that markup? — Ito Pizarro, Jun 12 '18 at 17:58
It's probably because bootstrap is using a page load event to attach its listeners. When you dynamically append items, it doesn't attach listeners to it. — Steven Jeffries, Jun 12 '18 at 18:00

score 1 · Accepted Answer · answered Jun 12 '18 at 19:15

1

Take a look at this: How to bind bootstrap tooltip on dynamic elements

In order to make a dynamically injected tooltip work, you must initialize a tooltip plugin using an element, which exists already after the page is loaded, e.g. body. It should then work.

answered Jun 12 '18 at 19:15

kwiat1990

479
1
5
12

Thanks for your help, it really helped me a lot. – Thiago Siqueira Jun 13 '18 at 12:06
Just add this in my function $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); – Thiago Siqueira Jun 13 '18 at 12:06
just more one thing kkk, in this moment I need to use my external functions, how I can implements this, in my dynamics elements ? – Thiago Siqueira Jun 13 '18 at 14:19

score 0 · Answer 2 · answered Jun 12 '18 at 18:48

0

A simple answer is Bootstrap = CSS + JS. Try to hide element onload and when you need show.

answered Jun 12 '18 at 18:48

stefo91

618
6
16

this works, but in this case I need a dynamic way, but thanks for your help <3 – Thiago Siqueira Jun 13 '18 at 11:54

Bootstrap tooltip does't work when I use jQuery to append the tooltip elements

2 Answers2