Using css class within another css class

Question

I have following html

 <div class="popover"> click to popoverpopover</div>

When user mouse hover on div there should be a popover

My css is following

.popover:hover 
{
    content:"popover";

    .popover:before
    {
        content:'';
        position: absolute;
        display: block;
        position: absolute;
        left: 15px;
        width: 0;
        height: 0;
        border: 7px outset transparent;
        bottom: -14px;
        border-top: 7px solid #555;
    }
}

But I just found out that in CSS I can't use class within another class.

Is there a way to achieve what I am trying.

Does this answer your question? http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — sebnukem, Mar 12 '15 at 15:15
@GCyrillus You are right. Now I have a pointer, thanks to you, how can I create popover body? thanks in advance — user4545762, Mar 12 '15 at 15:18
What is this 'popover' supposed to do? Does it have content in it? — Paulie_D, Mar 12 '15 at 15:34
@Paulie_D yes it supposed to be tool tip if u hover on things is supposed to appear — user4545762, Mar 12 '15 at 16:36
If you want **actual** content in the pop-over / tooltip then you can't use a pseudo-element. Use another div (inside the original div) instead and use that. — Paulie_D, Mar 12 '15 at 16:39

score 0 · Answer 1 · answered Mar 12 '15 at 22:53

You could use a data-* attribute to hold rollover text.

<div class="wrap">
  <span data-rollover="Tool tip">Check</span>
</div>

span:hover {
  font-size: 0;
}

span:hover:before {
  font-size: 16px;
content: attr(data-rollover);
}

Fiddle: http://jsfiddle.net/cgm3c2us/

General idea taken from: http://dabblet.com/gist/4286801

Using css class within another css class

1 Answers1