Skip to content

Instantly share code, notes, and snippets.

@gregory-yet

gregory-yet/image.html

Created October 12, 2017 07:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gregory-yet/25f82c5ec1162ad9c22df65e74325963 to your computer and use it in GitHub Desktop.
Save gregory-yet/25f82c5ec1162ad9c22df65e74325963 to your computer and use it in GitHub Desktop.
Download ZIP
Preview an image in a tooltip with a file input w/ bootstrap, popper.js
Raw
image.html
<html>
<head>
<title>Image in tooltip</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<style>
#medias input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
left: 50px;
}
#medias label.file {
cursor: pointer;
font-size: 14px;
padding: .5rem 1rem;
background-color: #0275d8;
border-radius: 5px;
color: #fff;
margin: 0 .2rem;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<h1>Hey!</h1>
<div id="medias" class="d-flex flex-wrap flex-lg-nowrap justify-content-center align-items-stretch align-self-stretch">
<label for="edit_media1" class="file">Image (1)</label>
<input type="file" name="edit_medias[]" id="edit_media1" accept="image/*">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script>
$('input[type="file"]').on('change', function(e){
$('label[for="' + $(this).attr('id') + '"]').text('Fichier (' + $(this).prop('files')[0].name + ')');
$('label[for="' + $(this).attr('id') + '"]').addClass('bg-success');
var img = document.createElement("img");
img.src = URL.createObjectURL($(this)[0].files[0]);
img.width = 100;
$('label[for="'+$(this).attr('id')+'"]').tooltip({
animated: 'fade',
placement: 'top',
html: true,
title: $('<div>').html(img).html()
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment