Image inside tooltip tiptip

I

8

7

I need to insert an image in a tooltip with hover effect.

$(".tel_view").tipTip({defaultPosition: "top", delay: 400, fadeIn: 400,keepAlive:true,activation:"click"});

HTML:

<img src="img_ag/lente.png" width="16" height="19" alt="lente"   class="tel_view" title="">

This is the image that i want insert to the tooltip.

<img src="img_ag/leg_in.png" id="prova">

Is possible insert an image into the tooltip? How it works?

Ila answered 28/8, 2013 at 8:11 Comment(6)

Hey, just add your HTML to title attribute. It will work. – Ablebodied 28/8, 2013 at 8:18

Hi, title="<img src='img_ag/leg_in.png'>" this is correct? – Ila 28/8, 2013 at 8:23

Yeah! I think that was the way. – Ablebodied 28/8, 2013 at 8:31

mmmm look the syntax, this is my site lookcommunication.it/testalessio. check the second line, first image. Thanks – Ila 28/8, 2013 at 8:33

Wait a minute, let me see. – Ablebodied 28/8, 2013 at 9:59

let us continue this discussion in chat – Ablebodied 28/8, 2013 at 10:3

G

2

JQuery UI has an alternative tool-tip widget that you might want to consider

here is a full example

http://jqueryui.com/tooltip/#custom-content

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Custom content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .photo {
    width: 300px;
    text-align: center;
  }
  .photo .ui-widget-header {
    margin: 1em 0;
  }
  .map {
    width: 350px;
    height: 350px;
  }
  .ui-tooltip {
    max-width: 350px;
  }
  </style>
  <script>
  $(function() {
    $( document ).tooltip({
      items: "img, [data-geo], [title]",
      content: function() {
        var element = $( this );
        if ( element.is( "[data-geo]" ) ) {
          var text = element.text();
          return "<img class='map' alt='" + text +
            "' src='http://maps.google.com/maps/api/staticmap?" +
            "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
            text + "'>";
        }
        if ( element.is( "[title]" ) ) {
          return element.attr( "title" );
        }
        if ( element.is( "img" ) ) {
          return element.attr( "alt" );
        }
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <h2>St. Stephen's Cathedral</h2>
    <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo="">Vienna, Austria</a></h3>
  </div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <img src="images/st-stephens.jpg" alt="St. Stephen&apos;s Cathedral" class="ui-corner-all">
  </a>
</div>

<div class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <h2>Tower Bridge</h2>
    <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo="">London, England</a></h3>
  </div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
  </a>
</div>

<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>


</body>
</html>

Guideline answered 28/8, 2013 at 8:15 Comment(1)

This answer pointed me to the jQuery UI tooltip widget, of which I was not aware. Nice, and quite powerful! To avoid confusion, you should edit the first line of this answer, from "Jquery got an amazing site" to "jQuery UI has an alternative tool-tip widget that you might want to consider." – Botulin 1/7, 2014 at 17:59

K

2

Hello You can set content in tipTip() like below : For hover tipTip you have to remove activation:"click" parameter by default its displayed on hover. Please see this working jsfiddle

$(".tel_view").tipTip({
    defaultPosition: "top", 
    delay: 400, 
    fadeIn: 400, 
    keepAlive: true, 
    content: '<img src="img_ag/leg_in.png" id="prova">'
});

Knowledge answered 10/11, 2016 at 5:22 Comment(0)

N

1

Yes it is possible, There are lot using different Jquery Plugin take a look at this demo http://jquery.bassistance.de/tooltip/demo/

Noyade answered 28/8, 2013 at 8:15 Comment(0)

P

1

its just simple funny work is a solution of this problem. Problem is image loading So

        var ttfixer = "";
        $(".tooltipL").each(function(){    
            ttfixer += $(this).attr("title");
        });
        $("#tooltipimgfixer").html(ttfixer);
        $(".tooltipL").tipTip({ maxWidth: "auto", edgeOffset: 10 });

add Html

<div style="display:none" id="tooltipimgfixer"></div>

Now Image are loading in page load. Tooltip will work good,

Pigheaded answered 20/2, 2014 at 16:52 Comment(0)

C

1

give solution gives us as a tooltip with hover effect you can use your .js and .css file also without .css and .js file you can't run this code.

<script>
$( function() {
$( document ).tooltip();
} );
</script>

Cislunar answered 9/11, 2016 at 4:35 Comment(0)

L

1

Try this..

HTML CODE LIKE

<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>

and JAVASCRIPT CODE LIKE

$( "#riverroad" ).tooltip({ content: '<img src="http://www.codingscripts.com/wp-content/uploads/2015/11/jquery.png" />' });

Lutz answered 15/11, 2016 at 9:41 Comment(0)

S

0

You can set your image html code as title attribute of the element on you set titTip.

Example code:

<span class='tel_view' title='<img src="img_ag/leg_in.png" id="prova">'></span>

The element can be an image o whatever you want.

Demo: http://jsfiddle.net/IrvinDominin/97qkE/

Smitty answered 2/9, 2013 at 11:13 Comment(0)

T

0

HTML code like

<div id="content"> </div>

Java Script Code like

$(document).ready(function() { 
     $("#content").tooltip({ content: '<img src="http://1.bp.blogspot.com/-GSsrz5Mvj6I/Uac1p3R1kxI/AAAAAAAAA7k/QFNVmDW5k3U/s320/Tooltip.jpg" />' }); });

Thun answered 5/12, 2016 at 4:45 Comment(0)

Recommended topics

Hot tags