Menu
I have tooltips whose content can range from very long to very short. I don't want to have 3 words' worth of content and have a huge tooltip, but I also don't want 20 words and have it all scrunched up on multiple lines. With this current setup, it stays stuck at the minimum width regardless.
The CSS:
.tooltip {
outline: none; position: relative;
min-width: 75px; max-width: 255px;
}
.tooltip .tool-content {
opacity: 0; visibility: hidden;
position: absolute;
}
.tooltip:hover .tool-content {
background: #999; border: 1px solid #555; color: #000000;
/* general styling */
position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
visibility: visible; opacity: 1;
}
The HTML:
<div class='tooltip'>
(content to hover)
<span class='tool-content'>
(tooltip content)
</span>
</div>
What troubles me is that I can take off position: relative and it works as intended! Yet I can find no work around, and relative positioning is key (or appears to be?) to having CSS hovers.
540
maybe......
width: max-content;
max-width: 200px; (as much as you want)
Two things, 1st the example you saw has width: 120px; which control the width. change it to whatever you need to be fixed.
Or if you don't want to fix the width, just add white-space: nowrap; so the text display in one line without wrap.
UPDATED: you could use display: block; so the tooltip get max width up to the parent width, see example below
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
display: block;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me
<span class="tooltiptext">Tooltip text very very very very very very very very long</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me 3
<span class="tooltiptext">Tooltip text very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long</span>
</div>
</body>
</html>Option 2, use bootstrap tooltip with customized hover effect, make it very easy:
$(document).ready(function() {
var originalLeave = $.fn.tooltip.Constructor.prototype.leave;
$.fn.tooltip.Constructor.prototype.leave = function(obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if (obj.currentTarget) {
container = $(obj.currentTarget).siblings('.tooltip')
timeout = self.timeout;
container.one('mouseenter', function() {
clearTimeout(timeout);
container.one('mouseleave', function() {
$.fn.tooltip.Constructor.prototype.leave.call(self, self);
});
})
}
};
//init all tooltip
$('body').tooltip({
selector: '[data-toggle=tooltip]',
trigger: 'hover',
delay: {
hide: 50
}
});
});.centered {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.tooltip-inner {
max-width: 500px !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="list-inline centered">
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.">Right</a></li>
</ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
