Min-width property is not working properly

Question

I have tried the CSS only tooltip. However, Min-width property is not working properly. I need smaller text as width minimal. If i change the CSS code min-width 100px, the larger text tool tip also reducing to 100px, like width property. please help me with the code.

Here is my code (see http://jsfiddle.net/5p3teu5b/2/):

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #000;
    text-decoration: none;

}

.tooltip:after {
    background: #ffffe1;
    border-radius: 4px;
    border:1px solid #DCA;
     box-shadow: 5px 5px 8px #ccc;
    bottom: 28px;
    color: #000;
    content: attr(title);
    display: block;
    left: 1em;
    padding:9px 8px 9px 8px;
    position: absolute;
    z-index: 98;
    min-width:200px;
    max-width:500px;
    font: 12px Arial, Helvetica, sans-serif;
    line-height:16px;   
}

.tooltip:before {
    border: solid;
    border-color: rgba(255,255,225,1) transparent;
    border-width: 15px 15px 0px 0px;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;    
}

You may want to restrict `max-width` instead of `min-width`. — emmanuel, Dec 18 '14 at 13:21
@Obsidian I thin k OP wants the tooltip has a width of 100px if there is no text for example but if there is too much text the width goes to 500px max — DaniP, Dec 18 '14 at 13:26
@Obsidian What i need is tooltip size will depend of the content written inside it. — pandi, Dec 18 '14 at 13:41
@Danko I have seen. first of all thank you for ur response. its fine. but again one problem occur. In my actual code we use table instead of div. If i change into table means it wont work. can u please tell me the code which use table? — pandi, Dec 18 '14 at 14:15
I can help you if you use on the fiddle your exact markup or the example on how the table is structured — DaniP, Dec 18 '14 at 14:16
Please show your actual code so we can give you correct answers. — DreamTeK, Dec 18 '14 at 14:19
@danko This the link of code : http://jsfiddle.net/5p3teu5b/11/ — pandi, Dec 18 '14 at 14:24
@obsidian This the link of code : http://jsfiddle.net/5p3teu5b/11/ — pandi, Dec 18 '14 at 14:25
The markup is not W3C valid. Give me a moment, I will rewrite the code for you. — DreamTeK, Dec 18 '14 at 14:48

score 4 · Answer 1 · answered Dec 18 '14 at 13:31

4

Seems like your problem is the span element is nested inside the a tag... As far I know is invalid to nest block elements inside the a tag. Try changing your markup to this:

<div>
  <a href="#" class="tooltip"><img src="1.png"></a>
  <span><p>Lorem Ipsum is simply text</p></span>
</div>

And your CSS making relative the div and use + to the hover:

div {
    position:relative;
}
.tooltip:hover + span {
    display: block;
}

Check the UpdatedFiddle

answered Dec 18 '14 at 13:31

DaniP

37,813
8
65
74

In html5 nesting block elements in a `a` tag is valid - see this post: http://stackoverflow.com/a/1828032/703717 – Danield Dec 18 '14 at 13:39
@Danield according to those comments seems like be possible..I can't find the line on the HTML5 spec that talks about that. But in this case seems like it's the problem maybe Jsfiddle doesn't work with HTML5 or need a line of doctype. – DaniP Dec 18 '14 at 13:50

score 0 · Answer 2 · answered Dec 18 '14 at 16:30

It took me a while but here is the cleaned code. I hope it was worth the effort.

The markup you where using was not valid and not good for your sites well being. :)

DEMO

Here is an example of a better formatted CSS only tooltip.

The size will be the size of its content.
Not be smaller than min value.
Not be bigger than max value.

HTML

<div class="wrapper">  
    <img src="1.png"></img>
    <div class="tooltip"><span>1. A small tooltip.</span></div>
</div>

CSS

.wrapper {
    position: relative;
}
.tooltip{
    position: absolute;
    left: 0;
    z-index: 1;
    display:none;
    width: 500px; /*this is max width. It's invisible */
}
.tooltip span {
    background: #ffffe1;
    border-radius: 4px;
    border: 1px solid #DCA;
    box-shadow: 5px 5px 8px #ccc;
    bottom: 33px;
    color: #000;
    content: attr(title);
    display: block;
    left: 3px;
    padding: 14px;
    position: absolute;
    z-index: 98;
    font: 12px Arial, Helvetica, sans-serif;
    line-height: 16px;
    display:block;  
}
.tooltip span:before,
.tooltip span:after{
    position: absolute;
    content: "";
    border: solid;
}
.tooltip span:before {
    border-color: rgba(255, 255, 225, 1) transparent;
    border-width: 14px 16px 0px 0px;
    bottom: -11px;
    display: block;
    left: 15px;
    z-index: 1;
}
.tooltip span:after {
    border-color: #DCA transparent;
    border-width: 13px 15px 0px 0px;
    display: block;
    left: 14px;
    bottom: -13px;
    z-index: -1;
}
.wrapper:hover > .tooltip {
    display:block;
}

Min-width property is not working properly

2 Answers2

DEMO