0

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>

2 Answers 2

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');
});
Sign up to request clarification or add additional context in comments.

6 Comments

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.
I tried to add the disable in the ELSE statement and that is being applied completely. So they are always disabled?
you can re-enable again by $(this).tooltip('enable');
Yes that worked. Only problem now is it is ignoring the placement bottom and defaulting to top for some reasons?
Any ideas foadabd?
|
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> 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.