javascript - Can't change attribute data-*** with jquery -
i don't understand why request button not performed. must change direction mobile screens, until it's 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>
you're looking @ default tooltip, rather bootstrap's tooltip. regular toolbar defaults bottom-right, giving confusion 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, need remember initialise them with:
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); });
adding code shows data-placement
change indeed work 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 code not giving same result, javascript may running before dom has loaded (meaning button wouldn't exist manipulated).
in case, ensure code wrapped inside $(document).ready(function(){})
force javascript wait until button has been created.
hope helps! :)
Comments
Post a Comment