Skip to content

Instantly share code, notes, and snippets.

@darshit-shah

darshit-shah/index.html

Created March 8, 2018 12:20
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 darshit-shah/29f439fe1d6daf4dd6a6cf2f5a2cd17f to your computer and use it in GitHub Desktop.
Save darshit-shah/29f439fe1d6daf4dd6a6cf2f5a2cd17f to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic Tooltip width
Raw
index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
html, body {
background: black;
}
.tooltip {
background: transparent;
min-width: 50px;
min-height: 50px;
}
.tooltip table {
border:1px solid white;
background: white;
}
.tooltip td {
padding: 2px 5px;
}
.key {
text-align: right;
color: black;
}
.value {
text-align: left;
font-weight: bold;
color: black;
}
</style>
</head>
<body>
<div class="tooltip">
</div>
<script>
$('document').ready(function(){
var data = [{key:'Name', value:"Metformin 500 "}, {key:'Code', value:'BFE2524'}, {key:'Batch ID', value: 'JKT3402'}, {key:'Machine', value: 'Granulation 7'}];
$('.tooltip').empty();
$('.tooltip').append('<table></table>');
data.forEach(function(d){
$('.tooltip table').append('<tr class="key"><td>'+d.key+'</td><td class="value">'+d.value+'</td></tr>');
});
$('.tooltip').innerWidth($('.tooltip table').outerWidth());
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment