CODEWITHSUNDEEP
htmlcss
pandi
pandi

Reputation: 61

Min-width property is not working properly

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;    
}

Upvotes: 4

Views: 679

Answers (2)

DreamTeK
DreamTeK

Reputation: 34177

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;
}

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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

Upvotes: 4

Related Questions