Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

When I interact with the collapsible card, it has a jerky animation. I would like it to open smoothly instead.

The issue lies with the tooltip-cus class. If I remove position: relative;, the opening animation is smooth, but then the position of the tooltip is incorrect when hovering over the product name.

In addition, I would like to include headings for the product count and price, aligning them neatly beneath each other.

h5 {
  font-size: 20px;
}

.group-card {
  background-color: #3B506C;
  border-radius: 10px;
}

.product-item {
  border-top: 1px solid #183150;
}

.product-item:first-child {
  margin-top: 30px;
}

.tooltip-cus:hover .tooltiptext-cus {
  visibility: visible;
}

.tooltip-cus .tooltiptext-cus {
  visibility: hidden;
  width: 280px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip-cus {
  position: relative;
  display: inline-block;
  font-weight: 500;
}

.tooltiptext-cus {
  top: 10px;
  left: 100px;
  font-size: 16px;
  font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/style.css">
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <div style="" class="mb-4 ml-3 p-4 group-card">
          <div class="row align-items-center">
            <div class="col-sm-12 ">
              <div class="media">

                <div class="media-body align-self-center">
                  <h5 class="m-0">
                    My products
                  </h5>
                </div>
              </div>
              <a href="#" data-toggle="collapse" data-target="#stretched-content" class="stretched-link collapsed" aria-expanded="false"></a>
            </div>
          </div>
          <div class="collapse" id="stretched-content">
            <div class="product-item py-3">
              <div class="tooltip-cus">
                <p class="mb-0">Product 1</p>
                <span class="tooltiptext-cus">
                                    This is product 1 description
                                </span>
              </div>
              <span class="badge badge-primary float-right">$2.99</span>
              <span class="badge badge-primary float-right mr-2">20</span>
            </div>
            <div class="product-item py-3">
              <div class="tooltip-cus">
                <p class="mb-0">Product 2</p>
                <span class="tooltiptext-cus">
                                    This is product 2 description
                                </span>
              </div>
              <span class="badge badge-primary float-right">$32.99</span>
              <span class="badge badge-primary float-right mr-2">20</span>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

htmlcssbootstrap-4

Answer №1

I wish for a smooth opening effect, achieved by utilizing the Transition CSS property

transition: all 1s ease 0s;

Solving problems 1 and 2:

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

h5 {
  font-size: 20px;
}

.group-card {
  background-color: #3B506C;
  border-radius: 10px;
 
}

.product-item {
  border-top: 1px solid #183150;
}

.product-item:first-child {
  margin-top: 30px;
}

.tooltip-cus:hover .tooltiptext-cus {
  visibility: visible;
}


.tooltip-cus:hover .tooltiptext-cuss {
  visibility: visible;
}

/* new class added */
.tooltip-cus .tooltiptext-cuss {
  visibility: hidden;
  width: 280px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 63%;
  left: 22%;
}

.tooltip-cus .tooltiptext-cus {
  visibility: hidden;
  width: 280px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 37%;
  left: 22%;
}


.tooltip-cus {
  display: inline-block;
  font-weight: 500;

}
.tooltiptext-cus {
  top: 10px;
  left: 100px;
  font-size: 16px;
  font-weight: 400;
}

/* for smoothing */
div#stretched-content {
  transition: all 1s ease 0s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <div  class="mb-4 ml-3 p-4 group-card">
          <div class="row align-items-center">
            <div class="col-sm-12 ">
              <div class="media">

                <div class="media-body align-self-center">
                  <h5 class="m-0">
                    My products
                  </h5>
                </div>
              </div>
              <a href="#" data-toggle="collapse" data-target="#stretched-content" class="stretched-link collapsed" aria-expanded="false"></a>
            </div>
          </div>
          <div class="collapse" id="stretched-content">
            <div class="product-item py-3">
              <div class="tooltip-cus">
                <p class="mb-0">Product 1</p>
                <span class="tooltiptext-cus">
                                    This is product 1 description
                                </span>
              </div>
              <span class="badge badge-primary float-right">$2.99</span>
              <span class="badge badge-primary float-right mr-2">20</span>
            </div>
            <div class="product-item py-3">
              <div class="tooltip-cus">
                <p class="mb-0">Product 2</p>
                <span class="tooltiptext-cuss">
                                    This is product 2 description
                                </span>
              </div>
              <span class="badge badge-primary float-right">$32.99</span>
              <span class="badge badge-primary float-right mr-2">20</span>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

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

In Safari, my layout is disrupted by the mere mention of the word 'City'

There's something strange happening in Safari that I can't quite figure out. Here's how my layout looks in Chrome: https://i.sstatic.net/lPhnP.png But when viewed in Safari, it looks like this: https://i.sstatic.net/IMnQb.png For some r ...

htmlcssbootstrap-4web-frontend

Implementing a Method to Detect Keypress Event on Anchor Element

Within our application, we have implemented anchor tags as buttons to enable specific style implementations. An interesting feature of the anchor tag is that it does not receive focus when navigating through tabs. Although we have successfully implemented ...

htmltags

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

jqueryhtmlcssmousehover

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

Interacting with PHP through JavaScript function calls

I am facing some frustration with my website due to an issue involving PHP. When I retrieve data from a PHP file, it returns a JSON list like this: {"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurst ...

javascripthtmljson

Creating a dynamic animation for a navigation bar's underline

I'm attempting to add a smooth underline effect to the links in my navbar when they are hovered over. Unfortunately, the entire ul element is being underlined instead of just the selected link. Is there a way to resolve this issue? a { text-deco ...

htmlcss

Clearly defined form field even with the inclusion of value=" "

I have a database that I am using to display data in an HTML form for user editing. <input type="text" id="name" placeholder="Name" required = "true" value = <?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ;?>> ...

javascriptphpjqueryhtml

Is it possible to customize the border spacing for individual cells?

My table resembles the one shown in this example I am looking to eliminate the gap between each "Previous" and "Current" cell pairs while still maintaining spacing between rows and other columns. Is there a way to achieve this? ...

htmlcssborderborder-spacing

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

htmlcsscss-position

How to utilize PHP to create a multiple select form for filtering results in a MySQL

I have been attempting to create a query using the results from a search form. In my form, I have a field called "state". My goal is to allow users to select multiple states and receive a list of results that include all the selected states. Currently, I o ...

phpmysqlhtml

In Stripe.js, the background color and height of the credit card input cannot be customized

I'm struggling with customizing the appearance of a Stripe credit card input within my Vue.js application. I want to adjust the background color to #f1f1f1 and set the height to 60px, but despite trying both base styles and css, I can't seem to g ...

javascriptcssvue.jsstripe-payments

Next.js production mode prevents CSS from loading properly

Issue Upon building and launching a production build of our application, the CSS fails to load. Inspecting the devtools reveals a multitude of errors and warnings: https://i.sstatic.net/R07q3.png Possible Causes The problems do not occur when running th ...

csswebpacksassnext.jswebpack-style-loader

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

javascripthtml

The data-ls attribute is currently not permitted on the svg element. Is there a way to fix this issue?

Upon running my site through the w3cvalidator tool, I encountered the following errors: "Attribute data-ls not allowed on svg element at this point" and "End tag svg did not match the name of the current open element (use)". Below is a snippet of the cod ...

htmlsvgw3cw3c-validationsvg-animate

Using Jquery and CSS to display or conceal table elements depending on viewport width

I am seeking advice for my issue. Here is the code snippet on JSFiddle. I have a list of models and corresponding values that vary across different categories. I have created a simple table to display this data. However, I need to alter the table structur ...

javascriptjqueryhtmlcss

Slide-out left menu using HTML and CSS

Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations. Here is wha ...

jqueryhtmlcss

Utilizing the require pattern to integrate JavaScript functionality into HTML

Have: project |- consume_script.js |- index.html Need index.html to be like: <html> <head> </head> <body> <script src="consume_script.js"></script> </body> </html> Issue: consume_script ...

javascripthtmlnode.jsnpmweb-frontend

As I continue to fill the child DIV element with more text, the shrink wrap is compromised and eventually breaks

Snippet of HTML code: <div id="container"> <div id="first"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia velit ut magna ultricies. </div> <div id="second"> Blandit </div ...

htmlcss

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

Utilizing Jquery to enhance slide image transitions with navigational links

As a newcomer to jQuery, I am attempting to create a slider using jQuery. Here is the script I have so far: $(function() { var bgCounter = 0, text = [ 'some html code here', 'some html code here', 'some ...

javascriptjqueryhtmlcssslide