Is there a way to make a tooltip expand horizontally instead of overflowing below the page? I have a tooltip that can be quite lengthy, and due to its max-width being set at 200px, it extends beyond the bottom edge of the page.
I am currently able to set a specific max-width for the tooltip like this:
.tooltip-inner {
max-width: 350px;
}
This solution works to an extent, but ideally I only want the width to increase when the tooltip is about to disappear off the page, not otherwise.
You can see a basic example of my issue in this JSFiddle link.
const button = document.getElementById("btn");
const buttonText = "A button"
const tooltipText = "A long tooltip. A long tooltip. [...]"
button.innerHTML = buttonText;
button.setAttribute("title", tooltipText);
$('#btn').tooltip();<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" integrity="sha512-cp9JSDyi0CDCvBfFKYLWXevb3r8hRv5JxcxLkUq/LEtAmOg7X0yzR3p0x/g+S3aWcZw18mhxsCXyelKWmXgzzg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" integrity="sha512-PxtG6eoPtr5QdgWieDr0Bsa0+IXe2qRA[...]</script>
<button type="button" class="btn btn-default" id="btn" data-toggle="tooltip" data-placement="bottom"></button>