Enhance the user experience by incorporating a tooltip into the input field using Bootstrap 5

I have implemented custom CSS to display an error icon with a tooltip, but after upgrading to Bootstrap 5, I am unable to achieve the same result.

Expected:

https://i.sstatic.net/Mjvik.png

.icon {
  position: absolute;
  bottom: 6px;
  right: 10.5px;
  color: rgba(220, 53, 69, .8);
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef1eef3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Body -->
<div class="mb-3 col-lg-4">
  <label class="col-form-label">Test</label>
  <input type="text" class="form-control form-control-sm" formControlName="test" />
  <span class="icon" [hidden]="condition" [ngbTooltip]="condition1 ? 'Invalid.' :'test Year is required.'" tooltipClass="tooltip-error">
    <em class="fas fa-exclamation-circle"></em>
    </span>
</div>

htmlcssangularbootstrap-5

Answer №1

The problem with the form-control in Bootstrap 5 is that it does not have the position relative property, causing issues with positioning of child elements. The workaround for this issue involves considering the position of the last parent or ancestor element with a position relative. Here is how to address this issue:

<!-- Using Bootstrap-5 -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    
    <!-- Main Body -->
    <div class="mb-3 col-lg-4">
      <label class="col-form-label">Test</label>
      <input type="text" class="position-relative form-control form-control-sm" formControlName="test" />
      <span class="position-absolute top-0 start-100 text-danger" style="margin-left: -2.2em; margin-top: 2.5em;" [hidden]="condition" [ngbTooltip]="condition1 ? 'Invalid.' :'test Year is required.'" tooltipClass="tooltip-error">
        <em class="fas fa-exclamation-circle"></em>
        </span>
    </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

Error encountered while importing AgGridModule in Angular2: Unexpected token

I'm facing an issue while trying to integrate ag-grid into my Angular2 project. Whenever I include AgGridModule in the @NgModule imports, it triggers an error message: (SystemJS) Unexpected token at eval import { AgGridModule } from 'ag-grid-ang ...

angularag-grid

"Achieving Alignment: Placing a Div Element Inside an H

I am in the process of building a portfolio for freecodecamp, but I am having trouble with centering the button and row div on the page. The row div is necessary because I will be adding more buttons later on, but for now I just need the FCC button. Below ...

htmlcssheaderanchorcenter

Tips for modifying and refreshing data in a live table with JQuery

One challenge I'm facing is figuring out how to transfer the data from a dynamic table back into input fields when clicking on the edit button of a specific row. Additionally, I need to update that particular row based on any changes made to the value ...

javascriptjqueryhtml

Ways to enlarge image size without compromising the image resolution?

My image is in PNG format or as a blob. It has dimensions of 800px by 600px. However, when I try to resize it using various canvas methods like the one mentioned in this Stack Overflow thread: Resize image, need a good library, it loses quality. I wou ...

javascriptangularimageresize

Connect ngx-time picker to form input in Angular

Currently, I have successfully implemented Angular material date pickers in my project, however, I am facing a challenge with integrating time pickers as it is not natively supported by Angular Material for version 8. To address this issue, I am utilizing ...

htmlangulartypescriptangular-material

What causes images to shift when resizing in Chrome, but not in Firefox or Safari?

My layout includes images - one on the left and two on the right. As I resize the browser window, the images scale accordingly. The issue arises when viewing my layout in Chrome: the image positions shift as I resize the browser, unlike Safari and Firefox ...

htmlcssfirefoxgoogle-chromesafari

Turn off Chrome's new tab preview thumbnails

Is there a method to prevent Google Chrome from displaying certain pages as thumbnails? I am inquiring because I am developing a website that contains confidential information. As it stands now, the sensitive data can be viewed in the thumbnail preview. ...

javascripthtmlgoogle-chrome

Enhance your HTML checkboxes with this stylish jQuery plugin!

Similar to the input tag in the style of StackOverflow, I stumbled upon a jQuery plugin that achieves the same effect. Unfortunately, I can't remember the name. Can someone please assist me? ...

jqueryhtml

Breaking apart paragraphs in a text using JavaScript

Hello, I am working on a code that is supposed to extract paragraphs from text entered into a textarea and create an array containing each paragraph. For example, it should turn text like this: Hello, that's the first paragraph Hello, that's th ...

javascripthtmlarrayssplit

Child component in Angular2 makes an observer call to its parent object

Let me try to explain this in the best way possible. I have a service that includes an observable class responsible for updating itself. This observable class needs to be pushed out to the app using the observer within the service. How can I trigger that ...

javascripttypescriptangular

problem with saving session data

I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...

javascripthtmlcsssession-storage

Reverse animation transition not activating in CSS

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

htmlcsscss-animationscss-transitions

Safari compatible JavaScript needed for enforcing required fields in HTML5

I have been using the following script to adjust the HTML5 required attribute of my input elements. However, I am now looking for a way to tweak this script so that it can also function properly in Safari browsers, where support for this attribute may be l ...

javascriptphpjqueryhtml

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

My Yii application located at site.com/module has the tinymce extension installed, but I am facing an issue where the tinymce CSS files are not loading when I access the application through the sub-domain alias module.site.com. Interestingly, all JS file ...

cssyiitinymce

Send an object containing client values to the parent component upon initialization in Angular

I am trying to pass a set of values to the parent component when a child component is loaded. However, I seem to be having trouble with this process. Any assistance or guidance on what might be going wrong would be highly appreciated. Here is the "data cl ...

angularparent-child

Is there a way to eliminate the black dots appearing on the right side of the navigation items within my bootstrap 5 navbar?

I'm currently using a bootstrap 5 navbar and everything seems to be functioning correctly, except for one issue - all the nav-items have a black dot on the right side of the text. Below is the code snippet for that particular section. I've made ...

htmlcssbootstrap-5

How can I fetch a value from a database and set it as the selected option in a

I am facing an issue with the usage of the selectpicker plugin from Bootstrap in order to select multiple items. My requirement is to create a modal for editing where the data is fetched from previous records, particularly an array. I am looking for a way ...

javascriptjqueryhtmllaravelbootstrap-selectpicker

In the Bootstrap Grid system, all posts are aligned to the left side

I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this? https://i.sstatic.net/ ...

htmlcssreactjsbootstrap-4

Interactive Django table using AJAX

This marks the second question in a series regarding my Django project. The code utilized here contains sections borrowed from this post: Stack Overflow The goal is to implement a dynamic table that cycles through objects in a list (currently set at an in ...

htmlajaxdjangodjango-templatesdjango-views

Using Angular to create an Echarts timeline that showcases 3 distinct categories

Here is an example graph created with Highcharts Struggling to replicate a chart like this using Echarts and ngx-echarts. Has anyone encountered this issue before? Currently utilizing the following dependencies: "@angular/animations": "^17 ...

angularechartsngx-echarts