Show tooltip content when its hovers


Tags: css,jquery,tooltip

Problem :

i am using this Tooltips with Just CSS this is great. i am using this tool-tip to show big size images, but the problem is, this tool-tips makes my website slower because this used to load all the images when the website load... So, my question is how to Show tooltip content only when its hovers? So, the images will not load when the site will load.
I have followed this article A little guide about jqueryui tooltip ajax callback and also this jsfiddle

$('#tippy').tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
    var elem = $(this);
    $.ajax('/echo/html').always(function() {
        elem.tooltip('option', 'content', 'Ajax call complete');
     });
}
});

but can't understand how to use this with the tool-tip ... any idea?



Solution :

If you want to use JQuery to show/preload the image, you can save the image URL in the data-* atribute in tooltip first, and show the value as an <img> tag:

<a href="#" class="has-tooltip" data-image="http://lorempixel.com/200/200/food/1">link text</a>

The JQuery:

$(document).ready(function() {
    $('.has-tooltip').hover(function() {
        $(this).find('.tooltip').html('<img src="'+$(this).data('image')+'" alt="loading...">').fadeIn();
    }, function() {
        $(this).find('.tooltip').hide();
    }).append('<span class="tooltip"></span>');
});

And the CSS:

.has-tooltip {
  position:relative;
}

.has-tooltip .tooltip {
  display:none;
  padding:10px;
  border:1px solid black;
  background-color:gray;
  position:absolute;
  top:100%;
  left:10%;
  z-index:999;
}

Here's a demo: http://jsfiddle.net/tovic/tvHT3/62/


    CSS Howto..

    How do I reference host element in CSS of an Angular2 component?

    How to remove dropdown active color in bootstrap 3.0?

    Leaflet for R: How to change default CSS cluster classes

    How to place rectangle inside image and make hover animation for it in CSS?

    (CSS) How to Shorten CSS code

    Css When having 2 bg-image, how to have 1 to extend out of the grid

    Show/Hide (Read More) Text Depending on Number of Character Pure CSS

    How to check image is visible (Webdriver)

    CSS - fluid design, how to correctly position right floats below the opposing element?

    CSS - How to upscale Unicode arrows?

    Images don't show up in quiz results after start over button

    How do I animate background image size on hover smoothly in css?

    joomla, CSS - show joomla module only for smartphone screens

    How to fix some issues with printing very basic HTML

    How to set jQuery draggable min/max-left and min/max-right

    Make image show when screen reaches a certain width (pixels)

    How to assign color obtained by CSS gradient generator

    CSS - How to add a glow effect around a fluid box?

    How to set css properties to dynamically created table?

    How to prevent specific css style sheet from styling a specific html tag

    How to always center a flexible square in viewport with pure CSS?

    how to remove the last li::after for first line in specific width of an div

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    css boxes are not shown in the right place (when adding doctype)

    how to remove css from the text box?

    How do I add a div under a right floated div?

    how to make this div margin to zero and more nature [closed]

    How to use html entities in CSS content property?

    How to get CSS to select ID that begins with a string (not in Javascript)?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?