Displaying an additional section using hover effects in Bootstrap

I recently utilized Bootstrap to create pricing tables which can be viewed here: http://www.bootply.com/VyHsJBDoNc

Is there a way for me to implement hover functionality on a span element (+ More Information!) that will display additional information as shown in the attached screenshot?

Any assistance would be greatly appreciated!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Check out this alternative solution

body
{
    margin-top: 60px;
}
.panel
{
    text-align: center;
}
.panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
.panel-body
{
    padding: 0px;
    text-align: center;
}
.the-price
{
    background-color: rgba(220,220,220,.17);
    box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
    padding: 20px;
    margin: 0;
}
span.glyphicon-preload {
    color: #23b070;
    padding-right: 7px;
    font-size: 13px;
}
.table {
    margin-bottom: 0;
}
.table>tbody>tr>td {
    padding: 14px;
}
.btn-insta {
    margin-top: 13px;
    padding: 10px 0;
    font-size: 20px;
}
.the-price h1
{
    line-height: 1em;
    padding: 0;
    margin: 0 0 5px 0;
    font-weight: 700;
    font-size: 42px;
    color: #333;
}
.panel-title {
    font-weight: 700;
    font-size: 24px;  
}
.subscript
{
    font-size: 25px;
}
.table-premium p {
    font-weight: 700;
    display: inline-block;
    margin: 0;
}
.table-free p {
    display: inline-block;
    margin: 0;
}
span.mini {
    font-size: 18px;
    color: #31708f;
}
.info {
  display: none;
  position: absolute;
  width: 90%;
  margin: 0 auto;
  bottom: 40px;
  height: 200px;
  left: 5%;
  background: #5cb85c !important;
  padding: 10px;
}
.panel-footer:hover .info {
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-md-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Starter Plan</h3>
   
                </div>
                <div class="panel-body">
                    <div class="the-price">
                        <h1>FREE</h1>
                        <span class="mini">Lasts for 12 Hours
                        <a href="#" class="btn btn-block btn-success" role="button">Activate</a>    
                    </span></div>
                    <table class="table table-free">
                        <tbody><tr>
                            <td>
                               <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice A</p>
                            </td>
                        </tr>
                        <tr class="active">
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice B</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice C</p>
                            </td>
                        </tr>
                        <tr class="active">
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice D</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice E</p>
                            </td>
                        </tr>
                        <tr class="active">
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice F</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Choice G</p>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
                <div class="panel-footer">
                   <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Additional details!</span>
                <div class="info well">
                   <span> More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here! More information here!</span>
              </div>

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

Answer №2

There are a few options to consider. If you prefer utilizing Bootstrap components, you may want to explore the popover component.

Alternatively, using jQuery event handlers and functions could also be a viable solution.

$(".more").hover(
  // When Hovered
  function() {
    // Display the information div
    // $("#moreInfo").show();
  }, 
  // When Left
  function() {
    // Conceal the information div
    // $("#moreInfo").hide();
  }
);

Answer №3

Check out these CSS styling tips:

CSS:-

body {
    margin-top: 60px;
}
.panel {
    text-align: center;
}
.panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
.panel-body {
    padding: 0px;
    text-align: center;
}
.the-price {
    background-color: rgba(220,220,220,.17);
    box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
    padding: 20px;
    margin: 0;
}
span.glyphicon-preload {
    color: #23b070;
    padding-right: 7px;
    font-size: 13px;
}
.table {
    margin-bottom: 0;
}
.table>tbody>tr>td {
    padding: 14px;
}
.btn-insta {
    margin-top: 13px;
    padding: 10px 0;
    font-size: 20px;
}
.the-price h1 {
    line-height: 1em;
    padding: 0;
    margin: 0 0 5px 0;
    font-weight: 700;
    font-size: 42px;
    color: #333;
}
.panel-title {
    font-weight: 700;
    font-size: 24px;  
}
.subscript {
    font-size: 25px;
}
.table-premium p {
    font-weight: 700;
    display: inline-block;
    margin: 0;
}
.table-free p {
    display: inline-block;
    margin: 0;
}
span.mini {
    font-size: 18px;
    color: #31708f;
}

.moreinfo {
    position: absolute;
    top: -37px;
    background: #23b070;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
}
.panel-footer {
    position:relative;
}

.moreinfo:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #23b070;
    bottom: -10px;
    z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;

    }

Here is the HTML structure to implement the above styles:

<div class="col-xs-12 col-md-3">
   <div class="panel panel-info">
      <div class="panel-heading">
         <h3 class="panel-title">Basic Plan</h3>
      </div>
      <div class="panel-body">
         <div class="the-price">
            <h1>FREE</h1>
            <span class="mini">Runs for 12 Hours
              <a href="#" class="btn btn-block btn-success" role="button">Activate</a>    
             </span>
         </div>
         <table class="table table-free">
            <tbody>
               <tr>
                  <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 1</p>
                  </td>
               </tr>
               <tr class="active">
                   <td>
                        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 2</p>
                   </td>
                </tr>
                <tr>
                   <td>
                      <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 3</p>
                    </td>
                </tr>
                <tr class="active">
                   <td>
                      <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 4</p>
                   </td>
                </tr>
                <tr>
                   <td>
                      <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 5</p>
                   </td>
                </tr>
                <tr class="active">
                  <td>
                     <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 6</p>
                  </td>
                 </tr>
                 <tr>
                   <td>
                     <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 7</p>
                   </td>
                 </tr>
              </tbody>
            </table>
          </div>
          <div class="panel-footer">
             <div class="moreinfo" style"display:none;">hi</div>
               <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span>
          </div>
        </div>
    </div>

And finally, add this JavaScript snippet:

$('.more').mouseover(function(){
   $('.moreinfo').show()
})

$('.more').mouseleave(function(){
   $('.moreinfo').hide()
})

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

Ban on the utilization of emojireact-role in external channels

How can I ensure that the bell reaction only gives a role in a specific channel? The provided code is below. Additionally, is there a way to restrict this feature so only administrators can assign roles through reacting with a bell emoji? Any assistance ...

javascriptnode.jsdiscorddiscord.js

What is the best way to target specific text within the DOM without including text within attributes?

We are currently displaying search results from various posts on our website, and we would like to highlight the search terms in the displayed content. Currently, we are implementing this functionality on the backend using PHP. We iterate through the post ...

javascriptjqueryhtml

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

htmlcssweb

Leveraging JSON data in a client-side JavaScript script

Recently, I started exploring node.js and express. One issue that I am currently facing is how to correctly retrieve json data in a client-side javascript file. I keep receiving a 404 error indicating that the .json file cannot be found. In my project&apo ...

javascriptjqueryjsonnode.jsexpress

How to extract the date value from an HTML date tag without using a datepicker

Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...

javascripthtmlappframework

Managing dynamically appearing elements in Ember: Executing a Javascript function on them

I'm currently working on a project in Ember and facing an issue with calling a JavaScript function when new HTML tags are inserted into the DOM after clicking a button. Below is a snippet of my code: <script type="text/x-handlebars" id="doc"&g ...

javascriptjqueryember.js

Accessing information from a json response using an ajax request

Currently, I am making an ajax call to fetch the longitude and latitude based on a pin code. Here is how I approached it: $(document).ready(function () { $.ajax({ type: "GET", url: "http://maps.googleapis.com/ma ...

javascriptjqueryjsonajaxgoogle-maps

Seeking guidance on selecting text using XPath

My HTML document contains the following HTML code: <!DOCTYPE html> <html> <head> <title>page XYZ</title> </head> <body> <p><b>bold text</b> some more text </p> <p>< ...

javahtmlseleniumxpath

Using a callback function with jQuery in a focus event

Is there a way to ensure that a callback function inside a focus() is only played once while the element has focus? For example, in the code snippet below, the alert('ok') will continue to be triggered as long as the textarea maintains focus. Is ...

jquerycallbackfocus

"Unlocking the Potential: Maximizing the Benefits of the top.gg Vote Web

My bot has been verified on top.gg, and I'm looking to offer rewards to users who vote for my bot. How can I detect when someone votes for my bot, get their ID, check if it's the weekend, and take action after the vote? Essentially, how do I util ...

javascriptnode.jsexpressdiscord.js

Is one round the limit for my JavaScript image slider?

After studying the JavaScript Chapter on W3Schools, I attempted to create an image slider. Initially, everything worked perfectly for the first cycle. For instance, when I clicked the next button, the slides continued to slide until the end of the slidesho ...

javascriptjqueryhtmlcss

Is the Await keyword failing to properly pause execution until the promise has been fulfilled?

I'm currently working on manipulating a variable within an async function, and I've noticed that the variable is being returned before the completion of the data.map function below. Even though I have the await keyword in place to pause the code ...

javascriptnode.js

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...

javascripthtmlreactjsgoogle-maps-api-3

The Fuel-ui module in Angular 2 fails to function properly when loaded from a different directory

We recently switched from ng-cli to Gulp for building our Angular2 project, and we are utilizing Fuel-ui. An unusual error has come up. We have incorporated Fuel-ui's alert component into one of our components. When referencing fuel-ui from node_mo ...

javascriptangularjsangularsystemjsfuelux

Differentiate between minimum and maximum values on ion-range sliders with discrete color options

I am currently working on customizing the theme of my ionic app, specifically trying to assign different colors to the min and max knobs on an ion-range component. At the moment, I am only able to apply a single HTML property called "color" to the selector ...

cssangularionic-frameworksassthemes

tips and tricks for adding content to json with the help of jquery/javascript

Is it possible to include text in a JSON array using jQuery or Javascript? Assuming that there is data in the following format: A list of numerical codes stored in a text file as 123, 456, 789 I am looking to convert them into a JSON array using JavaScr ...

javascriptjqueryjson

Opening a Partial View (.ascx) in jQuery UI Dialog

I'm a bit confused about how to display a partial view in a jQuery UI Dialog window. I was initially using a simple Dialog but decided to explore other options for various reasons. Most online tutorials only demonstrate opening <div></div> ...

jqueryasp.net-mvcmodal-dialog

What is the process for sending an image as input to a Django view using an Angular frontend?

I currently have a django web api with an angular frontend that allows users to upload and view images. My goal now is to expand this functionality: when the user clicks the "segment" button (see image), it should send the corresponding image to my python ...

javascriptpythonangularjsdjango

Enhancing User Interaction: Tips for Focusing on Touch in React Input Text Field

Having a bit of an issue with my input component that works perfectly on desktop but seems to be malfunctioning on mobile. I can't seem to get it to focus on press, and all the solutions I'm finding are related to React Native which I'm not ...

htmlreactjsinputtouch

Having difficulty interpreting the json data retrieved from the specified url

<html> <body> <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script> $(document).ready(function () { $.ajax({ type: 'GET& ...

javascriptajaxjson