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!
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>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();
}
);
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()
})
When I enter an email address, for example: if I enter "abc" it shows an alert saying "please enter a valid email". If I leave it blank and try to submit, it shows an alert saying "email required". But when I click register, the data is saved regardless of ...
In my JSP code, I have a list called ${contentList} that contains product information such as product images, names, and prices. To display this data in an HTML table using JSP, I want to dynamically set the class of the first table row based on the numbe ...
I am looking for a way to update the value of the second input field when the first one is changed. For example, if the user changes the value in "valuex00", I want the same value to be displayed in "valuey00". This should apply to all corresponding pairs ...
Can you take a look at the code below and help me find the mistake? function pair(str) { // Function to pair specific letters in a string for (var i = 0; i < str.length; i++) { // Check and pair letters based on certain conditions if (s ...
Below is the code I am using to populate a Dropdown: $(document).ready(function(){ $('#inDistrict').sSelect(); $("#inDistrict").change(function(){ $.getJSON("filldistricts.php",{id: $(this).val(), ajax: 'true'}, function(j) ...
Whenever I click the button labeled onClick, it triggers the transmission of data (both time and ID) to the backend. The issue at hand is that the backend seems to be receiving the data twice instead of just once. On inspecting req.body, it becomes eviden ...
My HTML table data is converted to JSON format and sent via AJAX to a Spring controller. In the controller, I used @RequestParam Map<String, String> to retrieve the values, but the entire JSON string was received as the only key. I cannot use a model ...
I'm working with a large array containing names of people, such as: let names = [ "John Brown", "Tristan Black", "Carl Jobbs", "Aidan Burrows", "Taylor Joe" ]; When given an input, I want to return the top 5 most relevant results ...
Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "<hello>, world!"; based on the user's input? The current code s ...
Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...
I'm having trouble with this code that is supposed to generate a random color. The CSS formatting works perfectly, but I suspect there might be an issue with the function itself. When I try to run the code, it doesn't produce any error messages â ...
Although I am successfully able to delete the comment, I am facing an issue where the callback function is not being invoked. My suspicion is that it might be related to how I pass multiple arguments to the function, but I cannot confirm this. Below is th ...
In my x.component.html file, I have a list of objects that are being displayed in Bootstrap cards like this: <div *ngFor="let item of items | async"> <div class="row"> <div class="col-lg-6"> <div class="card ...
I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...
Currently, I have implemented a live search feature that displays results based on what the user types in real time using the keyup function. However, one issue I encountered is that the displayed results inside the <div> tag are not clickable. Is th ...
When utilizing jQuery filter to search for names in a large list, it performs well with high speed when typing in the input field. However, upon pressing the backspace button to clear the search text, there is a noticeable delay of over 4 seconds when ther ...
Is it possible to access the file name and other attributes of a hidden file when submitting it using the <input type="hidden"> tag? My current project involves drag and drop file functionality on a server using Node.js. If I am able to dynamically ...
I am currently facing an issue with a piece of code I wrote in React JS. The state variable is not functioning as expected and even after modifying it upon button click, nothing seems to be working. After checking the console, I noticed that the state rema ...
The thread on implementing a callable interface provides some helpful information, but it doesn't fully address my specific query. interface lol { (a: number): (b: number) => string // (a: string): (b: string) => string // overloaded wi ...
Here is a solution to populate the generated drop-down menu: $('dropdown_options').innerHTML = ' '; jsonResponse.forEach(function(element){ $('dropdown_options').innerHTML += '<option value='+ elemen ...