diff --git a/.gitignore b/.gitignore index 2f7b1b90..cdd074d7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ dist node_modules npm-debug.log +.idea diff --git a/src/tooltipcontroller.js b/src/tooltipcontroller.js index 80ae643b..9cf1b197 100644 --- a/src/tooltipcontroller.js +++ b/src/tooltipcontroller.js @@ -14,6 +14,10 @@ * @param {Object} options Options object containing settings. */ function TooltipController(options) { + + // Holds on tooltip controller. + var back_reference = this; + var placementCalculator = new PlacementCalculator(), tipElement = $('#' + options.popupId); @@ -89,7 +93,7 @@ function TooltipController(options) { element.trigger('powerTipPreRender'); // set tooltip content - tipContent = getTooltipContent(element); + tipContent = getTooltipContent(element, back_reference); if (tipContent) { tipElement.empty().append(tipContent); } else { @@ -105,13 +109,8 @@ function TooltipController(options) { tipElement.data(DATA_MOUSEONTOTIP, options.mouseOnToPopup); - // set tooltip position - if (!options.followMouse) { - positionTipOnElement(element); - session.isFixedTipOpen = true; - } else { - positionTipOnCursor(); - } + // set tooltip position + back_reference.updatePosition(element); // add custom class to tooltip element tipElement.addClass(options.popupClass); @@ -209,6 +208,22 @@ function TooltipController(options) { }); } + /** + * Updates the position of the tooltip. + * + * @param {jQuery} element + * The element to update. + */ + this.updatePosition = function(element) { + // set tooltip position + if (!options.followMouse) { + positionTipOnElement(element); + session.isFixedTipOpen = true; + } else { + positionTipOnCursor(); + } + } + /** * Moves the tooltip to the users mouse cursor. * @private @@ -302,7 +317,7 @@ function TooltipController(options) { } // add placement as class for CSS arrows - tipElement.addClass(finalPlacement); + tipElement.attr('css', finalPlacement); } /** diff --git a/src/utility.js b/src/utility.js index 3338bc69..fd90e73e 100644 --- a/src/utility.js +++ b/src/utility.js @@ -123,10 +123,11 @@ function isMouseOver(element) { * Fetches the tooltip content from the specified element's data attributes. * @private * @param {jQuery} element The element to get the tooltip content for. + * @param {TooltipController} controller The tooltip controller. * @return {(string|jQuery|undefined)} The text/HTML string, jQuery object, or * undefined if there was no tooltip content for the element. */ -function getTooltipContent(element) { +function getTooltipContent(element, controller) { var tipText = element.data(DATA_POWERTIP), tipObject = element.data(DATA_POWERTIPJQ), tipTarget = element.data(DATA_POWERTIPTARGET), @@ -152,7 +153,36 @@ function getTooltipContent(element) { } } - return content; + // Make sure we have a jquery content object. + var real_content = $(content); + + // Verify not attach event again. + if (!real_content.hasClass('powertip-image-processed')) { + + // Verify content is an image. + if (real_content[0].localName === 'img') { + // Attach load triger, to update positions after an image was successfully loaded. + $(real_content).addClass('powertip-image-processed').on('load', function() { + controller.updatePosition(element); + }); + } + } + + // Now process all sub images starting, from the content. + + // Process only images which aren't yet. + $('img:not(.powertip-image-processed)', real_content).each(function() { + + // Mark image as processed and attach event. + $(this).addClass('powertip-image-processed').on('load', function() { + + // Reposition the tooltip after an image is successfully loaded. + controller.updatePosition(element); + }); + }); + + // Return real content instead of original content. + return real_content; } /**