0

I have used the following How to create a box when mouse over text in pure CSS?

and switch the position of the cursor and the placement

span{
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 150px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    top: -10px;
    left:60px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    top:40px;
    right: 135px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    margin-left:-10px;
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
p{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

p:hover span{
    display:block;
}

<p>Hover here<span>some text here ?</span></p>

Here is the [fiddle] (http://jsfiddle.net/beerbuddha/4kjnb4e5/)

I need a split 25%(header) with different background color and the rest (75%) to be a different color and to hold text and an image.

I tried the approach and what happens is that the display:none doesnt work anymore at all and the hover box it self break.

Im slightly lost.

Community
  • 1
  • 1
azngunit81
  • 1,574
  • 2
  • 20
  • 38

1 Answers1

0

Very simple. You change html:

<div class="div-hover">Hover here
  <div class="div-tooltip">
    <div class="tooltip-header">some text here ?</div>
    <div class="tooltip-body">some text body some text body</div>
  </div>
</div>

Full code is here

Ryan Nghiem
  • 2,417
  • 2
  • 18
  • 28
  • Not quite, I need it to look liek a SOLID heading (think table). So the top part would be where I can put in bold a title. Then the rest is the body with a description. If that helps describing my needs. Appreciated the response. – azngunit81 Nov 06 '14 at 02:53
  • 1
    So you change they to
    elements. I have change my code [here](http://jsfiddle.net/4kjnb4e5/2/)
     – Ryan Nghiem Nov 06 '14 at 03:31
  • perfect - please switch your answer around so that you can get the spotlight – azngunit81 Nov 06 '14 at 03:57