bootstrap star-rating plugin wrong icon - javascript

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>

Related

How to highlight specific dates in Tempus Dominus Bootstrap 4?

How to highlight specific dates in Tempus Dominus 4? For example I want to highlight 15, 18 ..etc. And it would be possible to disabled dates that isn't highlighted? I can't find any solution for this specific version of datetimepicker.
$('#apptDay').datetimepicker({
format: 'L'
});
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css'>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="input-group date" id="apptDay" data-target-input="nearest">
<input name="day" type="text" class="form-control datetimepicker-input" data-target="#apptDay" placeholder="mm/dd/yyyy" value="" />
<div class="input-group-append" data-target="#apptDay" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js'></script>
</body>
</html>

Why is my Bootstrap datetimepicker not working?

Hi I've added a bootstrap datetimepicker to my website but it seems like it's not working.
I Am I missing something? or doing something wrong? Please help.The control is in a bootstrap modal but as far as I know it doesn't restrict your accessibility which is the only reason I can think of for it not working...
This is the referances I have:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" href="css/jquery.bootstrap-touchspin.min.css" />
<link rel="stylesheet" href="css/jquery.contextmenu.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mycss.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
<script src="js/bootstrap.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>
<script src="js/jquery.contextmenu.min.js"></script>
<script src="Scripts/bootstrap-datetimepicker.min.js"></script>
this is my control:
<div class="row" id="div9" runat="server">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="margin-top: 5px">
<asp:Label ID="Label14" runat="server" Text="Start Date" CssClass="form-control" Font-Bold="true" ForeColor="Black" Font-Size="14px"></asp:Label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<asp:TextBox ID="txt_start_date" runat="server" CssClass="form-control" TextMode="SingleLine" Width="100%" ForeColor="Black" Font-Bold="True"></asp:TextBox>
</div>
</div>
and this is my script:
<script type="text/javascript">
$(function () {
$('#txt_start_date').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: true });
});
});
</script>

Boostrap 4 not support datetimepicker.
Change file bootstrap-datetimepicker.min.js
'collapse in'
expanded = $parent.find('.in'),
closed = $parent.find('.collapse:not(.in)'),
expanded.removeClass('in');
closed.addClass('in');
to
'collapse show'
expanded = $parent.find('.show'),
closed = $parent.find('.collapse:not(.show)'),
expanded.removeClass('show');
closed.addClass('show');

Try this code, no need to use Jquery. Use input type date instead of text.
<input type="date" class="form-control"/>
Working Fiddle with & without Jquery

How to modify App.js to show HTML Template

I've just started using React and started a new project by integrating a demo html admin template all over internet.
I tried to do similar but ended up showing the default react page. One thing I observed is that the page shows the login page with inputs button on load but as soon as the full page is loaded the default React page is displayed. I however feel there's something wrong I'm doing in App.js file.
Below is my index.html code in public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="description" content="">
<meta name="keywords" content="some">
<meta name="author" content="example">
<link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/assets/images/favicon.png">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/toastr.css">
<link rel="stylesheet" type="text/css" href="/bypasser/assets/vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/sweetalert.css">
<style>
.swal-button { border-radius: 1.5rem !important; }
</style>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/forms/toggle/switchery.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/tables/datatable/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/unslider.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/weather-icons/climacons.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/meteocons/style.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/charts/morris.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" />
<!-- END VENDOR CSS-->
<!-- BEGIN STACK CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/app.min.css">
<!-- END STACK CSS-->
<!-- BEGIN Page Level CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/menu/menu-types/vertical-menu-modern.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/users.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/timeline.min.css">
<!-- END Page Level CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/plugins/forms/switch.min.css">
<!-- BEGIN Custom CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/style.css">
<!-- END Custom CSS-->
<!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>MS - Finance | Login Page</title>
</head>
<body class="blank-page">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div id="login-section" class="card border-grey border-lighten-3 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<!-- <div class="p-1"><i class="ft-layers"> StackMantle</i> -->
<img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
<!-- </div> -->
</div>
<!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
</div>
<div class="card-content">
<div class="card-body">
<form class="form-horizontal form-simple">
<fieldset class="form-group position-relative has-icon-left mb-0">
<input required type="text" autofocus class="round form-control" id="login-username" placeholder="Username / Email-ID / Contact Number" required>
<div class="form-control-position">
<i class="ft-user"></i>
</div>
</fieldset>
<fieldset class="form-group position-relative has-icon-left">
<input required type="password" class="round form-control" id="login-password" placeholder="Login Password" required>
<div class="form-control-position">
<i class="fa fa-key"></i>
</div>
</fieldset>
<div class="form-group row">
<!-- <div class="col-xs-6 col-sm-6 col-md-6 col-12 text-center text-md-left">
<fieldset>
<input type="checkbox" id="remember-me" class="chk-remember">
<label for="remember-me"> Remember Me</label>
</fieldset>
</div> -->
<div style="margin-top: -15px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
<a id="swap-forgot" href="javascript:" class="card-link">Forgot Password?</a>
</div>
</div>
<button type="submit" id="login-button" class="round btn btn-outline-primary btn-block"><i class="ft-unlock"></i> Unlock My Panel</button>
</form>
</div>
<div class="card-footer">
<div class="text-center">
<a href="/" class="btn btn-md btn-outline-secondary round">
<i class="ft-eye"></i> Let's have a look
</a>
</div>
</div>
</div>
</div>
<div id="pass-section" class="card border-grey border-lighten-3 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<!-- <div class="p-1"><i class="ft-layers"> </i> -->
<img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
<!-- </div> -->
</div>
<!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
</div>
<div class="card-content">
<div class="card-body">
<form class="form-horizontal form-simple">
<fieldset class="form-group position-relative has-icon-left">
<input type="email" class="round form-control" id="reset-email" placeholder="Registered Email-ID" required>
<div class="form-control-position">
<i class="ft-mail"></i>
</div>
</fieldset>
<div style="margin-top: 10px; margin-bottom: 20px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
<a id="swap-login" href="javascript:" class="card-link">I know My Password!</a>
</div>
<button type="submit" id="reset-button" class="round btn btn-outline-primary btn-block"><i class="ft-rotate-ccw"></i> Recover Password</button>
</form>
</div>
<div class="card-footer">
<div class="text-center">
<a href="/" class="btn btn-md btn-outline-secondary round">
<i class="ft-eye"></i> Let's have a Look at Blog
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- BEGIN VENDOR JS-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/vendors.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/toastr.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/forms/icheck/icheck.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/sweetalert.min.js" type="text/javascript"></script>
<!-- BEGIN VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/datatables.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.flash.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/jszip.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/pdfmake.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/vfs_fonts.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.html5.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.print.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/js/scripts/tables/datatables/datatable-advanced.min.js" type="text/javascript"></script>
<!-- BEGIN PAGE VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/unslider-min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/timeline/horizontal-timeline.js" type="text/javascript"></script>
<!-- END PAGE VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/bootstrap-checkbox.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/switchery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<!-- BEGIN PAGE LEVEL JS-->
<script src="%PUBLIC_URL%/assets/js/scripts/forms/switch.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL JS -->
<!-- BEGIN STACK JS-->
<script src="%PUBLIC_URL%/assets/js/core/app-menu.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/js/core/app.min.js" type="text/javascript"></script>
<!-- END STACK JS-->
<script src="%PUBLIC_URL%/assets/custom/login.js" type="text/javascript"></script>
</body>
</html>
Below is my code of App.js in src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Below is my code of index.js in src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
What should I modify to make it work?

The app component is being rendered on this line in your index.js file:
ReactDOM.render(<App />, document.getElementById('root'));
try commenting or removing the above line and see if it helps.
better yet, modify the App() component to your desired content and not directly modify the html file on your public folder.

You are rendering the App in the node with id root. While the page is loading, you see the login form but as soon as the javascript is loaded the content inside root is replaced with the react content. I am not sure what you are trying to achieve with this.

I am not entirely certain if i understood your problem correctly, but as far as i can see you have not imported the public/index.html file at all.
Your index.js file imports the App.js and the result is simply the contents of the App.js file.
If this indeed is the question you are asking, you can require the HTML file into a variable, stringify it (for example using this stringify package) and the use the dangerouslySetInnerHTML prop in div to show the strigified content.

slideUp is not working on button

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;
});`

Bootstrap popover in modal and input-group-addon

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>

Categories