I can't get Bootstrap 3.3.5 popover to work. I want the popover to become visible when hovering the input-group-addon, but nothing happens.
My current code:
Javascript:
$(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: '#imgPopover'});
});
HTML
<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
<img src="~/images/absolent-logo.gif" style="max-height: 20px" />
<span data-bind="html: $parents[1].text.qTempHeader"></span>
</button>
<input type="number" class="form-control" data-bind="value: qTemp"/>
</div>
I've tried a bunch of different things, but nothing seems to do it. A push in the right direction would be much appreciated.
the problem is with the container: '#imgPopover' attribute, the div is too small to contain the popover. change it to body and its working.
$(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: 'body'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
test me
</button>
</div>
Related
I have table with popover link, like this.
and when it's mouse over it's like this
Do anyone have idea how to make that popover does not cover the price, actually does not enter the next column but is in the same
Here is the code.
<div class="condition-title">
<a data-toggle="popover" data-html="true"
data-content="{{ $rate->description }}
#include('components.book.popover_fees', ['fees'=> $fees])
#include('components.book.popover_advance_payment', ['rate' => $rate, 'type' => 'activity'])">
{{$rate->name_frontend}}
<i class="glyphicons glyphicons-question-sign"></i>
</a>
</div>
Add data-placement="top". See docs: https://getbootstrap.com/docs/4.1/components/popovers/#four-directions
<a data-toggle="popover"
data-placement="top"
...
>...</a>
$(function () {
$('[data-toggle="popover"]').popover()
})
.condition-title {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="condition-title">
<a data-toggle="popover"
data-placement="top"
data-html="true"
data-content="content">
Click to reveal
<i class="glyphicons glyphicons-question-sign">i</i>
</a>
</div>
Hi experts i'm new to jquery & here when i click on 'change alternate email' link the box is sliding down but when click on save button actually it should slide Up but it didn't.
Here is my code.
HTML:
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>
Jquery:
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').hide();
return false;
});
I think you need to use
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
jsfiddle: https://jsfiddle.net/pbvb7fm5/
mine is ok,are you sure you have run the code on more than 1 browser to see the result?maybe your css conflict with slideUp()
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>
To solve this and to have better control over the elements you are searching for (like save btn) use an Id on the html elements. Something like below:
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('#btnSave').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius" id="btnSave">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>
Use Following Html code.
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius alternate-email-btn">Save </button>
</div>
</div>
</div>
<span class="alternate-email">change alternate email</span>
Your span has no effect and use the button class (alternate-email-btn) inside buton tag
<span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span>
When You are hiding alternate-email-box class it only hides your section without any animation. Use slideUp and slideDown will give you the effect. You can also use slideToggle(). Like
$('.alternate-email-box').slideToggle();
Or use some id
$('#button').click(function() {
$('.alternate-email-box').slideUp();
return false;
});`
I am creating a web app in angularjs with mvc,
I used of the datepicker of bootstrap,
code
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
but i am getting this error while run the application
Uncaught TypeError: $(...).datetimepicker is not a function
at HTMLDocument. (SelfAssignTask:325)
at l (jquery2.0.3.min.js:4)
at Object.fireWith [as resolveWith] (jquery2.0.3.min.js:4)
at Function.ready (jquery2.0.3.min.js:4)
at HTMLDocument.S (jquery2.0.3.min.js:4)
these are the script on my layout page
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script> <!-- bootstrap-css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //bootstrap-css -->
<!-- Custom CSS -->
<link href="~/css/style.css" rel='stylesheet' type='text/css' />
<!-- font CSS -->
#*<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>*#
<!-- font-awesome icons -->
<link rel="stylesheet" href="~/css/font.css" type="text/css" />
<link href="~/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<script src="~/js/jquery2.0.3.min.js"></script>
<script src="~/js/modernizr.js"></script>
<script src="~/js/jquery.cookie.js"></script>
<script src="~/js/screenfull.js"></script> <!-- charts -->
<script src="~/js/raphael-min.js"></script>
<script src="~/js/morris.js"></script>
<link rel="stylesheet" href="~/css/morris.css">
<!-- //charts -->
<!--skycons-icons-->
<script src="~/js/skycons.js"></script>
<!--//skycons-icons-->
the error is coming because i used many scripts, or what else?
First you need to include bootstrap-datetimepicker.js(read docs) but it requires moment.js.
But if you already plan to using angularjs consider to initialize your widgets by using directives, because that how you should do that in angular way. Check out that plnkr for explanation.
So here we go:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" integrity="sha256-Gn7MUQono8LUxTfRA0WZzJgTua52Udm1Ifrk5421zkA=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js" integrity="sha256-SS5UPPXAM4HWVoFCt0tsx90VWhRf7cStU5kabObE8cw=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var initDatePicker = function () {
$('#datetimepicker1').datetimepicker();
};
window.onload = initDatePicker;
</script>
</div>
</div>
Plugin url : http://plugins.krajee.com/star-rating
I initialized the plugin using the default option, however the icon displayed seem to be overridden by something else.
Javascript
$("#rating").rating();
HTML
<div class="row">
<div class="col-md-offset-1 col-md-10 ">
<div class="form-group">
<label for="rating">Rating</label>
<input type="number" data-step="1" class="form-control rating" name="rating" id="rating"/>
</div>
</div>
</div>
Make sure that you have all required resources (js, css) included as shown here in basic example for your library - https://github.com/kartik-v/bootstrap-star-rating#user-content-usage
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/js/star-rating.min.js" type="text/javascript"></script>
Tooltip at an <i></i> icon, but the style is ugly.
I want to be like in this picture (default Bootstrap)
<script>
$( document ).ready(function() {
$('.mark-read-button').tooltip();
});
</script>
<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>
Try using this code it uses CDNs and a jumbotron to stop the tooltip from going off of the screen.
<!-- CDNs -->
<!-- JQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Jumbotron is to stop the tooltip from going off of the screen. -->
<div class="jumbotron">
<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>
</div>
<!-- The script cannot be inside another document -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>