I have a button that when clicked will load a bootstrap tooltip whose source is an AJAX request. This example doesn't illustrate, but in production I intend to have many buttons that when clicked will have an unknown amount of information in them. Because of this, I want to position the tooltip (bootstrap 3.0) in a different place depending on an element's position in the window, and the height of the tooltip, i.e. if id #click has CSS top 100px, a tooltip height greater than 100 means the element should be placed on the bottom (I didn't go so far as to deal with left and right yet). With the current code below I get nothing to occur when I first click on the #click element. Here is a readout of what the console has:
position.top: 99position.left: 400
You can see that on the first click, there is no tooltip and thus its height is null. After a second click the height is set correctly but the setPlacment function must still be holding unto the original value of height because no matter what I try everything falls to the else block. How can I change my code so that my desired events are happening after one click?
- $(document).ready(function () {
- $('#click').draggable();
- $(document.body).on('click', function () {
- tooltipManager.title();
- });
- $('#click').on('shown.bs.tooltip', function () {
- });
- var tooltipManager = {
- title: function () {
- //ajax code to get title from database
- $.ajax({
- type: "POST",
- contentType: "application/json",
- url: "Service.asmx/GetDrugs",
- dataType: "json",
- success: function (data) {
- //bootstrap uses the title attribute to set the html inside the tooltip
- //here it's set to the results of the AJAX
- var $tooltipData = prettyTooltip(data.d);
- $('#click').tooltip({
- trigger: 'click',
- html: true,
- placement: tooltipManager.placement.setPlacement(data.d),
- title: $tooltipData.html()
- //it seems to me that it would be better design to call the tooltipManager
- //setPlacement function, but since it's an async request, it fails
- });
- //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 () {
- var height = $('.tooltip').height();
- var 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();
- }
- });
