Add bootstrap tooltips via jQuery

Question

How would I loop over some links in a div and apply the Bootstrap tooltips to them based on their title text. So for example I would need this:

<a href="#" tile="link1">Link 1</a>
<a href="#" tile="link2">Link 2</a>
<a href="#" tile="link3">Link 3</a>

To become this:

<a href="#" data-toggle="tooltip" data-placement="bottom" tile="link1">Link 1</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" tile="link2">Link 2</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" tile="link3">Link 3</a>

foad abdollahi · Accepted Answer · 2020-07-15 06:42:55Z

2

Check it:

$('a').each(function () {

    $(this).data('toggle', 'tooltip');
    $(this).data('placement', 'bottom');

    $(this).tooltip()
});

//for disable :
$('a').each(function () { 
    $(this).removeAttr("data-toggle");
    $(this).removeAttr("data-placement");
    $(this).tooltip('disable');
});

edited Jul 15, 2020 at 6:42

answered Jul 14, 2020 at 12:54

foad abdollahi

2,04618 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

j00m Over a year ago

Thats perfect. So I perform this function on page scroll when the layout changes but also need to toggle them OFF again in the ELSE function.

j00m Over a year ago

I tried to add the disable in the ELSE statement and that is being applied completely. So they are always disabled?

foad abdollahi Over a year ago

you can re-enable again by $(this).tooltip('enable');

j00m Over a year ago

Yes that worked. Only problem now is it is ignoring the placement bottom and defaulting to top for some reasons?

j00m Over a year ago

Any ideas foadabd?

|

souravmsh · Accepted Answer · 2020-07-14 12:58:18Z

2

Try this:-

$('a').each(function(){
  $(this).attr({
    'data-toggle': 'tooltip',
    'data-placement': 'bottom',
  }).tooltip();
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<a href="#" title="link1">Link 1</a>
<a href="#" title="link2">Link 2</a>
<a href="#" title="link3">Link 3</a>

edited Jul 14, 2020 at 12:58

answered Jul 14, 2020 at 12:51

souravmsh

6586 silver badges11 bronze badges

Collectives™ on Stack Overflow

Add bootstrap tooltips via jQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related