Hình ảnh bên trong tooltip tiptip

Tôi cần chèn hình ảnh vào chú giải công cụ có hiệu ứng di chuột.Hình ảnh bên trong tooltip tiptip

$(".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="">

Đây là hình ảnh mà tôi muốn chèn vào tooltip.

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

Có thể chèn hình ảnh vào chú giải công cụ không? Làm thế nào nó hoạt động?

Nguồn

2013-08-28 Reverter

Hey, chỉ cần thêm HTML của bạn vào thuộc tính 'title'. Nó sẽ hoạt động. –

Xin chào, tiêu đề = "" điều này là chính xác? – Reverter

Vâng! Tôi nghĩ đó là cách. –

JQuery UI có một widget công cụ-tip thay thế mà bạn có thể muốn xem xét

đây là một ví dụ đầy đủ

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>

Nguồn

2013-08-28 08:15:00 Nahum

Câu trả lời này đã chỉ cho tôi tiện ích con công cụ jQuery UI , mà tôi không biết. Đẹp, và khá mạnh mẽ! Để tránh nhầm lẫn, bạn nên chỉnh sửa dòng đầu tiên của câu trả lời này, từ "Jquery có một trang web tuyệt vời" tới "jQuery UI có một tiện ích công cụ thay thế mà bạn có thể muốn xem xét". – CyberMonk

Có nó là có thể, Có rất nhiều sử dụng khác nhau Jquery Plugin hãy xem bản demo này http://jquery.bassistance.de/tooltip/demo/

Nguồn

2013-08-28 08:15:12 Markipe

Bạn có thể đặt mã mage html dưới dạng title thuộc tính của phần tử trên bạn đặt titTip.

Ví dụ mã:

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

Yếu tố có thể là một hình ảnh o bất cứ điều gì bạn muốn.

Bản trình diễn: http://jsfiddle.net/IrvinDominin/97qkE/

Nguồn

2013-09-02 11:13:13

Công việc vui nhộn đơn giản chỉ là giải pháp cho vấn đề này. Vấn đề là hình ảnh bốc Vì vậy

 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>

Bây giờ hình ảnh được tải trong tải trang. Chú giải công cụ sẽ hoạt động tốt,

Nguồn

2014-02-20 16:52:37

cung cấp giải pháp cho chúng tôi dưới dạng chú giải công cụ có hiệu ứng di chuột mà bạn có thể sử dụng tệp .js và .css của mình mà không có tệp .css và .js mà bạn không thể chạy mã này.

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

Nguồn

2016-11-09 04:35:41

Xin chào Bạn có thể đặt nội dung trong tipTip() như dưới đây: Đối với di chuột tipTip bạn phải gỡ bỏ activation:"click" tham số theo mặc định hiển thị của nó trên di chuột. Vui lòng xem hoạt động này jsfiddle

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

Nguồn

2016-11-10 05:22:11

Hãy thử điều này ..

HTML MÃ NHƯ

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

và JAVASCRIPT MÃ NHƯ

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

Nguồn

2016-11-15 09:41:57

HTML code như

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

Mã Java Script như

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

Nguồn

2016-12-05 04:45:40

Hình ảnh bên trong tooltip tiptip

Trả lời

Các vấn đề liên quan