Tooltip on Image

How to add tooltip to image on hover with CSS

You can wrap the text into a <span></span> and show it on parent :hover

CSS

div.click-to-top span {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #333;
  color: #fff;
}

div.click-to-top:hover span {
  display: block;
}

HTML

<div class="click-to-top">
  <img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 1" />
  <span>Tooltip text</span>
</div>

Fiddle

Adding tooltip hover to an image with css

.tooltiptext2 is not a child of .image. Using .image + .tooltiptext2 instead of .image .tooltiptext2 makes the tooltip work.

https://jsfiddle.net/8Lmz2oLj/

How to show an image in tooltip?

try this.

<!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>

Sizing Bootstrap tooltip for image

I think that tooltip's template option could help you to do what you want.

For example, you could create a specific template only for your image, using a specific class to format only its tooltip.

$(document).ready(function(){  $('[data-toggle="tooltip"]').tooltip();  
  $('[data-toggle="tooltip-image"]').tooltip({    template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner image"></div></div>'  });    });

.tooltip-inner.image {    max-width: 100%;}.tooltip.show {    opacity: 1;}.tooltip img {    margin: 5px 0;    background-color: #333;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">  <h3>Tooltip Example</h3>  <p><a href="#" data-toggle="tooltip" title="Normal tooltip very very long => Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis vehicula diam ac ornare. Vestibulum consequat, quam vitae porta ornare, nibh leo convallis ipsum, vel interdum est ex nec urna. Nunc cursus semper nunc, sit amet viverra quam placerat vitae. Etiam vitae pharetra erat. Integer lobortis enim non nisl hendrerit sodales. Ut interdum luctus tristique. Nullam vestibulum tincidunt ultricies. Etiam ut nunc lectus. Aliquam fermentum magna a arcu finibus sodales. Sed a eros ex. Pellentesque dictum finibus augue nec sagittis. ">Hover over me</a></p>  <p><img src="https://picsum.photos/500/300" data-toggle="tooltip-image" data-html="true" title='<img src="https://picsum.photos/500/300" class="d-block">'></p></div>

Is it possible to use tooltip with an image in map tag?

It's possible to set a title to each area.

But the tooltips can't have an image in pure html.

Look at this snippet as example:

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" title="sun">  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" title="mercury">  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"  title="venus"></map>

how to get an image's tooltip, which will only appear when we mouseover it. In Selenium

Tooltips are generally part of title attribute. In this case tooltip is in 'div' tag with class 'tippy-content',

This code will work.

String img2 = "//*[@id=\"eael-section-tooltip-bf4f6d6\"]/div/div/img";
String xpathTooltip1 = "//div[@class='tippy-content']";

WebElement image= driver.findElement(By.xpath(img2));
Actions action = new Actions(driver);
action.moveToElement(image).perform();
String actTooltip = driver.findElement(By.xpath(xpathTooltip1)).getText();
System.out.println("The tooltip  is " + actTooltip);

Sample Image

Angular Material Tooltip - is it possible to embed an image in a mat-tooltip?

You would need to implement custom template, which material tooltip doesn't support out of the box. There are workarounds if you look around though.

A simpler way would be to use package, that supports templates however.

https://ng-matero.github.io/extensions/components/tooltip/overview

<h2>Tooltip with template</h2>

<mat-form-field class="example-user-input">
  <mat-label>Tooltip position</mat-label>
  <mat-select [formControl]="position">
    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
      {{positionOption}}
    </mat-option>
  </mat-select>
</mat-form-field>

<button mat-raised-button
        [mtxTooltip]="tooltipTpl"
        [mtxTooltipPosition]="position.value"
        aria-label="Button that displays a tooltip in various positions">
  Action
</button>

<ng-template #tooltipTpl>
  <div style="background: gray">
    <img src="https://icons-for-free.com/download-icon-angular-1321215611022593855_256.png" alt="">
  <div>This is a template!</div>
  <div>Ceci est un modèle!</div>
  <div>这是一个模板!</div>
  <div>これはテンプレートです!</div>
  <div class="text-right">هذا قالب!</div>
</div>
</ng-template>

Working example: https://stackblitz.com/edit/angular-3wa7ea-ksuij3?file=src%2Fapp%2Ftooltip-auto-hide-example.html

How to add picture to tooltip PrimeNG

<i
pTooltip="<img class='cell-view-file__tooltip' src='{{cell.value}}' alt='{{fileName}}'/>"
[escape]="false"
appendTo="body"
class="pi pi-images"
tooltipPosition="bottom"
tooltipStyleClass="tooltip"