<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
<div class="padding sample">
<button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button>
</div>
.padding {
padding: 13rem !important;
margin-left: 300px
}
button {
display: inline-block;
min-width: 100px;
text-align: center;
color: #fff;
background: #ff3d2e;
padding: 1rem 2rem;
font-size: 1rem;
margin-top: 1.5rem;
border: none;
border-radius: 5px;
transition: background 0.1s linear
}