Изображение внутри подсказки tiptip

Мне нужно вставить изображение в всплывающую подсказку с эффектом зависания.Изображение внутри подсказки 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="">

Это образ, который я хочу вставить в подсказке.

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

Возможно ли вставить изображение в всплывающую подсказку? Как это работает?

источник

2013-08-28 Reverter

Эй, просто добавьте свой HTML в 'title' атрибута. Это будет работать. –

Hi, title = "" это правильно? – Reverter

Да! Думаю, так и было. –

JQuery UI имеет альтернативный виджет всплывающей подсказке, что вы могли бы хотеть рассмотреть

здесь полный пример

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>

источник

2013-08-28 08:15:00 Nahum

Этот ответ указал мне на виджеты jQuery UI tooltip , о котором я не знал. Ницца, и довольно мощный! Чтобы избежать путаницы, вы должны отредактировать первую строку этого ответа, из «JQuery получился удивительный сайт», чтобы «jQuery UI имеет альтернативный виджет для подсказок, который вы, возможно, захотите рассмотреть». – CyberMonk

Да, это возможно, Там будут много с использованием различных JQuery Plugin ознакомьтесь с этой демонстрацией http://jquery.bassistance.de/tooltip/demo/

источник

2013-08-28 08:15:12 Markipe

Вы можете установить i mage html code как title атрибут элемента на вас установлен titTip.

Пример кода:

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

Элемент может быть изображение о все, что вы хотите.

Демо: http://jsfiddle.net/IrvinDominin/97qkE/

источник

2013-09-02 11:13:13

его просто просто смешная является решением этой проблемы. Проблема загрузки изображения Так

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

добавить Html

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

Теперь изображения загружаются в загрузке страницы. Всплывающая подсказка будет работать хорошо,

источник

2014-02-20 16:52:37

дать решение дает нам подсказку с эффектом зависания, вы можете использовать ваши .js и .css-файл также без .css и .js-файла, вы не сможете запустить этот код.

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

источник

2016-11-09 04:35:41

Привет Вы можете установить содержание в Туптупе(), как показано ниже: Для висения Туптупа вы должны удалить activation:"click" параметр по умолчанию его отображаются при наведении курсора мыши. См. Эту работу jsfiddle

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

источник

2016-11-10 05:22:11

Попробуйте это ..

HTML КОДА LIKE

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

и JAVASCRIPT КОД КАК

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

источник

2016-11-15 09:41:57

HTML-код, как

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

кода Java Script как

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

источник

2016-12-05 04:45:40

Изображение внутри подсказки tiptip

ответ

Смежные вопросы