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 to put some divs in a row?

    Primefaces p:growl css. How to extend div message background color width

    How to make right-side triangle in CSS ribbon menu?

    How to turn off word wrapping in HTML?

    How does positioning work in HTML/CSS?

    How to show borders of th elements with gradient fills in IE9?

    How to create a 3 column layout in css?

    CSS: how to calculate margin inside a div for a fluid layout

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    How to make the divider between two tbody elements moveable

    How to write persistent CSS box rules?

    How to make the CSS width property go from bottom to top

    PHP/CSS how to keep my checkboxs from going past my border

    How to create CSS3 bounce effect

    css3 : how to make div go up to bottom of page?

    CSS or Jquery how to position image in the middle of an li element?

    How to prevent mobile browser micro-shrinking HTML block level elements?

    Slideshow Glitch - Debugging Assistance

    How to avoid Zalgo text bleeding all over place without totally removing it?

    How to overlay “transformed” element?

    How do I update an div css to display an complete image when section is complete?

    How to center a component without knowing its width in Css

    How can I resize a background-image to fit my element (without set width) in CSS 2?

    Glide.js, how to check size of image?

    How to change the width of displayed text nested in a div?

    How do I set frame alignment?

    How to load content in a “virtual window” like “LightBox”

    How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?