Make custom tooltips compatible with changing widths - html

Question

I have a custom tooltip code for my forum but due to its nature, I can't seem to make it compatible with different [tip] ranges.
See below for what I mean:
span.tooltip {
border-bottom: 1px dashed black;
}
span.tooltip span {
display: inline;
z-index: 10;
opacity: 0;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
margin-left: -100px;
margin-top: 27px;
-webkit-box-shadow: 1px 1px 7px transparent;
-moz-box-shadow: 1px 1px 7px transparent;
box-shadow: 1px 1px 7px transparent;
border: 1px solid #444;
}
span.tooltip:hover span {
display: inline;
opacity: 1;
position: absolute;
background: #f4f4f4;
}
span.tooltip>span:hover {
display: inline;
position: absolute;
border: 1px solid #444;
background: #f4f4f4;
}
span.tooltip>span {
max-width: 200px;
padding: 10px 12px;
opacity: 0;
visibility: hidden;
z-index: 10;
position: absolute;
font-size: 12px;
font-style: normal;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 7px #6B151F;
-moz-box-shadow: 1px 1px 7px #6B151F;
box-shadow: 1px 1px 7px #6B151F;
}
span.tooltip:hover>span {
opacity: 1;
text-decoration: none;
visibility: visible;
overflow: visible;
display: inline;
}
span.tooltip span>b:first-child {
width: 15px;
height: 15px;
margin-left: 20px;
margin-top: -19px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset -1px 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
-o-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
display: none0/;
*display: none;
background: #f4f4f4;
border-top: 1px solid #333;
border-right: 1px solid #333;
}
<span class="tooltip">works fine with long tips<span><b></b>parameter</span></span>
<br /><br />
<span class="tooltip">not<span><b></b>parameter</span></span> so much with shorter ones
<br /><br />
not even when it's <span class="tooltip">indented<span><b></b>parameter</span></span> into the paragraph
So uh... Yeah. I'm not sure how to make it compatible with smaller tips. Percent widths and using left do not work. I have already tried. Please don't suggest I use that unless you found a way how to make it work.
If it's not possible to make it work then that's all right, just lemme know.

Answer 1

There are a few problems with the tooltip you are using. First of all tooltips must be fluid and flexible, meaning they need to position themselves according to the element they are tipping. Also it's width should be decided by the ammount of text inside it. I have created a Tooltip javascript file that can help you accomplish that. But if you prefer fixing your current one you can do the following:
Add padding to your tooltip
span.tooltip span {/* all your previous code */
padding: 6px 10px; }
add a minimum width to your tooltip
min-width: 20px;
if you do decide to implement my tooltip library send me a message or comment on my post.