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

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -