Response title
This is preview!
Dynamically moving tooltip
in Using jQuery
•
9 years ago
The problem I'm having is that when the page loads and I click on the #click element, the tooltip doesn't appear, and the height of the tooltip is null. However, on a second click the tooltip works as expected, but the logic in my setPlacement method always falls to the else block. Considering that this project will have many buttons I would like to use an object to mangage the buttons' state, and maybe even have certain events trigger different AJAX calls.
1
<script type="text/javascript"> $(document).ready(function () { $('#click').draggable(); $(document.body).on('click', function () { tooltipManager.title(); }); $('#click').on('shown.bs.tooltip', function () { //this is the event for when the tooltip is shown tooltipManager.placement.setPlacement(getHeight($('.tooltip',$('#click').offset.top))); }); var tooltipManager = { title: function () { //ajax code to get title from database $.ajax({ //ajax options success: function (data) { var $tooltipData = prettyTooltip(data.d); $('#click').tooltip({ trigger: 'click', html: true, //if I add click() at the above line I get an infinite loop of AJAX calls }, error: function (xhr) { console.log('failed: ' + xhr.status); } }); }, placement: { left: 'left', top: 'top', right: 'right', bottom: 'bottom', //if the value of getHeight is over a certain amount //I want to change the position of the tooltip setPlacement: function (height,position) { height = $('.tooltip').height(); position = $('#click').position(); console.log('the height is: ' + height); console.log('position.top: ' + position.top + 'position.left: ' + position.left); if (height > position.top) { return this.bottom; } else { return this.left; } } } } //not sure if this is good design to have this not a property of the tooltipManager object //this works currently for placing the tooltip in the correct position function prettyTooltip(data) { var $div = $('<div>'); for (var i = 0; i < data.length; i++) { var $p = $('<p>').text(data[i]).appendTo($div); } return $div; } //this is currently 136 function getHeight(el) { return $(el).height(); } }); </script> <div id="click" style="position:absolute; top:99px; left:400px" class="btn btn-group">click</div> </div>