Leveraging Bootstrap 5 for designing personalized tooltips

Using Bootstrap 5, I am currently working on creating a unique custom tooltip. I found the necessary markup in the Bootstrap 5 documentation here.

After some research, I discovered that tooltips in Bootstrap 5 are not contained within the calling element, but rather exist as siblings. I am attempting to implement a custom class using the following markup:

// CSS test option #1
.custom-tooltip + .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

// CSS test option #2
.custom-tooltip ~ .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

<span class="custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="The tooltip text<br/>Extra textC">
    <svg ... ></svg>
</span>

Although using just .tooltip-inner functions correctly for a general tooltip, I need to implement various custom tooltips without creating a global tooltip.

csstwitter-bootstraptwitter-bootstrap-tooltipbootstrap-5

Answer №1

(I spent some time resolving this issue as the standard solution did not work --- it could be related to JSFiddle or a bug in BS5.)

The recommended approach is to include your custom class in the customClass option, like this:

<span data-bs-customClass="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

However, I encountered an issue with this on the JSFiddle. The HTML is rendered in all lowercase on Chrome, causing the "C" in "customClass" to be lowercase as well, resulting in "customclass" which is not recognized by BS5 JS. The workaround is to define the option in the tooltip initializer, like so:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    'customClass': 'custom-tooltip'
  })
})

Then, your CSS styling should function as expected with the following:

.custom-tooltip.tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

EDIT:

It turns out that this issue has been resolved ... The correct method is to include a hyphen "-" before an uppercase option and use the lowercase form, like this:

<span data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

Additionally, the initializer should exclude that option (as adding it overrides the data attribute). The initializer should be as follows, according to the documentation:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Answer №2

In order to display the tooltip on click, the code should be implemented as follows :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link rel="stylesheet" href="@{/styles/bootstrap_rtl_5.2.3.min.css}"/>
</head>

<body>


<img alt="i" data-bs-customClass="custom-tooltip-does-not-work" data-bs-html="true"
     data-bs-toggle="tooltip" src="@{/bootstrap-icons-1.10.5/info-circle-fill.svg}"
     title="#{card.block.agreement.contract.info}">

<script>
    $(document).ready(function () {
        [].slice.call(document.querySelectorAll('img[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                'customClass': 'custom-tooltip',
                animated: 'fade',
                placement: 'bottom',
                trigger: 'click'
            })
        })
    });
</script>

</body>

</html>

Credit goes to : Bootstrap tooltip click trigger not working

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 JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

What is the best way to implement CSS styles from a parent component?

Within a React component using Emotion, we have a component called OtherComponent: OtherComponent: ... return <div css={otherComponentStyles}> <div className='something'> </div> </div> There is also another comp ...

cssreactjsnext.jsemotion

Partial element visibility while scrolling

My goal is to create a table with a fixed size that can be horizontally scrolled. I applied overflow-x: auto;, but only a part of the table is scrolling while the start of the table is off the screen. I am unable to provide the code, so I've added a s ...

htmlcss

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

htmlcssangular

Having trouble implementing CSS styling on my Django HTML file

I have come across several solutions on this issue but haven't been able to resolve my problem. I am attempting to apply my style.css located in the path \...\static\css. Below is my directory structure as shown in the image here: https ...

pythoncssdjangodjango-settingsdjango-static

Android mobile browser lacks visibility of certain elements

please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...

htmlcss

Can Glychicons be utilized in form submission buttons?

While I can easily create buttons with glyphicons using the <a class="btn...", I'm facing an issue when trying to do the same with <input type="submit" class="btn btn-default" value="" />. Instead of displaying the button, it appears blank. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

cssfont-awesome

Container that can be scrolled under varying heights

Trying to structure some CSS in order to create a website that resembles the layout of a typical desktop application: Almost there, but struggling to make the scrollable panel stick to the bottom of the viewport and show a scrollbar instead of overflowing ...

htmlcss

Combine the content from multiple text areas and submit it to another text area

****UPDATE**** Thanks to @JasonB, I was able to resolve the previous issue mentioned. Now, I have three additional textareas on the same form that should only appear when their respective checkboxes are clicked. How can I integrate this into my current sc ...

javascriptjqueryhtmlcss

Arrange the input fields on a single line in Rails for a clean and organized layout

Below is a Rails code snippet for input fields. Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%> <br/> Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%> ...

cssruby-on-rails

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

csshtmlimage

Modify the height of every div after a successful ajax request

I need assistance in reducing the height of a div within an ajax response that has a class called .shorten-post, but I am unsure how to accomplish this task. I specifically want to decrease the height only for those within the ajax response, not throughou ...

javascriptjquerycssajax

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

What is the best way to choose a single li element?

I am working on creating a reservation system using HTML, CSS, and JS. I want to customize the color of the border for each list item (li). However, I want only one li to be selected at a time. When I click on a different li, it should remove the selection ...

javascripthtmlcssarrays

Error message stating: "jsp encountered a java.lang.NullPointerException"

Hey everyone, I'm new to Java and JSP and I don't have much knowledge about JSON. However, I need to pull data from a database and display it on a JSP page using Bootstrap Data Table. I chose this because it offers features like Pagination, Filte ...

javajsontwitter-bootstrapjsp

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

javascripthtmlcss

Is there a way to use prettier to format HTML codes without breaking up the tags?

As someone new to web development, I have recently encountered some challenges with coding, one of them being Prettier. This tool formats codes into parts, making it difficult for me to understand the code properly. After formatting, the code gets separat ...

htmlvisual-studio-codebootstrap-5prettier

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

javascriptjqueryhtmlcss

What could be the reason for the lower section of my website not being displayed?

I'm having an issue with a new div I added to the bottom half of my website - it's not showing up. Oddly enough, when I test the same code on a separate web page, it works fine. Can someone please take a look at the code and help me out? Thank yo ...

pythonhtmlcssdjango