Can't change attribute data-*** with jquery

Question

I don't understand why the request for button does not performed. I must to change the direction for mobile screens, but until it's now work.

 $( "button.btn-tooltip" ).attr( "data-placement", "left" ); 

 body { padding: 10px; } button { width: 100px; height: 30px; margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"></button> 

Answer 1

You're probably looking at the default tooltip, rather than Bootstrap's tooltip. The regular toolbar defaults to the bottom-right, which could be giving you confusion with the data-placement of right :

 $("button.btn-tooltip").attr("data-placement", "left"); 

 body { text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"> Text </button> 

To use Bootstrap tooltips, you need to remember to initialise them with:

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

Adding this code shows that your data-placement change does indeed work as expected:

 $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); $("button.btn-tooltip").attr("data-placement", "left"); 

 body { text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"> Text </button> 

If your code is not giving you the same result, then your JavaScript may be running before the DOM has fully loaded (meaning that the button wouldn't exist for it to be manipulated).

In this case, ensure that your code is wrapped inside a $(document).ready(function(){}) to force the JavaScript to wait until the button has been created.

Hope this helps! :)

Answer 2

I think the attribute is added indeed, but because you add the attribute after the bootstrap have initialized, so it does not work. Do you use the tooltip in bootstrap? you can try to set the attribute before call
$('button.btn-tooltip').tooltip()

Answer 3

你可以做

$("button.btn-tooltip").data( "placement", "left" );

Answer 4

Your code as written works properly, as seen here: http://jsbin.com/xozuseyeyi/edit?html,js,output

My suspicion is that your javascript code is running before your button is available in the DOM.

Have you tried wrapping your code inside a document.ready() handler or similar?

$(document).ready(function() {
    $("button.btn-tooltip").data( "placement", "left" );
});