Как показать изображение во всплывающей подсказке? - PullRequest
Новая
       3

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

0 голосов
/ 03 июня 2019

Я хочу показать изображение во всплывающей подсказке, если навести указатель мыши. Я использую HTML, CSS и JAVASCRIPT / JQUERY. Я сохранил свое изображение в папке, поэтому я ссылаюсь на него с localhost.

Я попытался установить содержание всплывающей подсказки с помощью JQuery: 

$(document).ready(function() {
    $('#informe').tooltip("option","content","<img src='images/reports/informeInversiones.PNG' />");
    $('#informe').tooltip("option","html","true");
    $('#informe').tooltip("option","animated","fade");
    $('#informe').tooltip("option","placement","bottom");
});

И я попытался установить содержание всплывающей подсказки в чистом HTML: 

<td colspan="2" id="informe" data-toggle="tooltip" title="<img src='images/reports/informeInversiones.PNG'/>"><p><i class="fas fa-download"></i><a id="save"> Generar Informe</a></p></td>

Затем в JQuery: 

$(document).ready(function() {
    $('#informe').tooltip("option","html","true");
    $('#informe').tooltip("option","animated","fade");
    $('#informe').tooltip("option","placement","bottom");
});

У меня есть ссылка, которая на onclick вызывает функцию JS, которая загружает PDF. Я хочу, чтобы при наведении мыши на ссылку показывался предварительный просмотр (простое изображение) PDF, который вы собираетесь сгенерировать. Я пробовал решения, которые я видел в других вопросах этой страницы, но они не работают.

Вот так я распоряжусь ссылкой: 

<td colspan="2"><p><i class="fas fa-download"></i><a href="#" id="informe" title="">Generar Informe</a></p></td>

А это JQuery: 

$('#informe').tooltip({content: "<img src='images/reports/informeInversiones.PNG'/>"});

Я даже пытался поместить простой текст в content:, но он даже не показывает всплывающую подсказку.

Ответы [ 2 ]

1 голос
/ 03 июня 2019

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(document).ready(function() {
  	$("#content").html('<a id="magilla" href="#" title="" >Magilla Gorilla</a>');
   	$("#content #magilla").tooltip({ content: '<img src="https://i.etsystatic.com/18461744/r/il/8cc961/1660161853/il_794xN.1660161853_sohi.jpg" />' }); 

	});
  </script>
</head>
<body>

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

</body>
</html>
0 голосов
/ 03 июня 2019

Вот фрагмент изображения всплывающей подсказки по ссылке. Я уверен, что вы можете использовать этот код для вашего дела 

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
    background:#333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}

.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
}
<a href="https://codepen.io/anon/pen/rgPKvy" class="tooltip">
    Link
    <span>
        <img class="callout" src="https://freefrontend.com/assets/img/css-tooltips/pure-css-tooltips.png" />
        <img src="https://freefrontend.com/assets/img/css-tooltips/pure-css-tooltips.png" style="float:right;" />
        <strong>CSS only Tooltip</strong><br />
        Pure CSS popup tooltips with clean semantic XHTML.
    </span>
</a>
...