How to Customize Bootstrap Tooltip Size for Images

I'm currently working on customizing Bootstrap 4 tooltips to display images.

<img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'>

To achieve this, I created a custom CSS code to ensure the tooltip scales properly with the image width.

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

Although this setup works well for images, it unintentionally affects all text tooltips as well. I would like to maintain the original behavior of text tooltips while only applying the custom CSS to images. Is there a way to accomplish this?

cssbootstrap-4twitter-bootstrap-tooltip

Answer №1

One way to achieve your desired outcome is by utilizing the template feature of tooltips as outlined in the documentation.

To customize the tooltip specifically for images, you can define a unique template with a distinct class for styling.

$(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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS to smoothly transition elements as they fill in empty space

As I have multiple blocks of content, I slide one to the side and then remove it. Once that is completed, I want the blocks below it to smoothly move up and fill the space. Check out this JSFiddle Example for reference HTML Code <div id="container"&g ...

htmlcsstransition

Difficulty with NodeJS, Hapi, and Cascading Style Sheets

I've decided to challenge myself by creating a small webhost using Node.js with hapi. Even though I'm not an expert in Node.js, I am eager to learn as much as possible. Currently, my main issue revolves around fetching a CSS file from an include ...

javascriptcssnode.jshapi.js

AngularJs - $watch feature is only functional when Chrome Developer Tools are active

My goal is to create a $watch function within a directive that monitors changes in the height and width of an element. This will allow the element to be centered on top of an image using the height and width values. Below is my app.js code: app.directive ...

javascriptjqueryhtmlcssangularjs

What is the process for setting dynamic variables as CSS content within Vue.js?

Forgive my lack of expertise, but I am interested in learning more about utilizing dynamic variables and CSS within Vue. I have a concept in mind where pressing a button would result in the letters of the button label spacing out further. Is it feasible t ...

cssvue.js

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss

The CSS grid-template-area feature is not functioning properly in web browsers

Struggling with creating a responsive CSS grid layout for different screen sizes. I want to have five divs on desktop screens and adjust the layout for smaller screens. As a newbie in web development, I'm finding it challenging to get it right. .fir ...

htmlcsscss-grid

When starting out with Bootstrap, which version of the framework is best for beginners to learn and utilize?

After experimenting with Bootstrap, I noticed that some classes in v3 and v4 are not the same. In certain instances, a specific thing may have a different class name between the two versions. The confusion lies in deciding between v3 and v4 because many ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

Using CSS to design a table-like structure with rows that span multiple columns

I am trying to generate a table dynamically using CSS and a JSON array. For example: In the code snippet provided, I have assigned a class of 'spannedrow' to span certain cells in the table, although the class is not defined yet. This is just ...

javascriptjqueryhtmlcss

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

javascripthtmlcss

CSS Border Animation Enhances the Entire Div Components

I have a div with an animated pulsing border, achieved through CSS keyframes. The issue I am facing is that the animation affects the entire content within the div, whereas I want it to apply only to the border itself. Here's my code: <div class=" ...

htmlcss

Highlight the menu item when you reach a specific section

I am facing difficulties in creating a scrolling menu that highlights the respective item when a specific section is reached. As a beginner in design, I am struggling to achieve this effect. Any insights or guidance on how to implement this would be grea ...

jqueryhtmlcss

Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse. The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box. However, when hover ...

htmlcsshover

Tips for creating a dynamic div height that adjusts based on its content in percentage

Having trouble with 100% height sections that don't expand with the content? I've tried using height: auto; min-height: 100%; without success. Check out this FIDDLE for more information. ...

htmlcssresponsive-designheightfullscreen

Tips for aligning a website logo and header vertically with the navbar

I'm having trouble aligning the navbar vertically with my website logo and header. I've tried using display: inline-block; and vertical-align: middle; on the , , and tags within the same div at the top of my website, but it ends up switching fro ...

htmlcsspositionbootstrap-4

Looking for a way to incorporate dynamic rows within Bootstrap 4?

I am struggling to figure out how to structure my bootstrap rows and columns to line up as shown in the image. I have attempted nesting columns within rows and vice versa but haven't had any success. The yellow and green sections in the picture are d ...

htmllayoutbootstrap-4

Can SCSS be compiled into CSS specifically tailored for external use on a website or internal use on a specific page?

Typically, I construct websites using Next.js along with external CSS files for compiling from SCSS to CSS, or static/CMS based sites/modules/plugins with Gulp handling the compiling process. However, this approach leads to all CSS being included on every ...

cssnext.jssassstaticgulp

Guide to bringing API information into a Material UI Card

I've been working on a Recipe app that leverages data from the edamame API. I successfully imported Material UI cards into my .js file to pull data from the API and stored it in a const named recipes. However, I'm facing difficulties in getting t ...

htmlcssreactjsmaterial-uiedamam-api

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

javascriptjqueryhtmlcsstwitter-bootstrap-4

Tips for effectively resizing an iframe within a grid layout

Task Tailwind React When adjusting the scale of an iframe, it disrupts its position within the grid. Expected Outcome: The iframe should maintain its position after scaling, but with a smaller size. Current Behavior: The iframe's position is be ...

htmlcssreactjsiframetailwind-css