0

I am trying to make a message which displaces on hover. My code:

CSS:

.showtext:hover:before {
content: attr(data-content);
padding: 0.8em 1em;
position: absolute;
color: #fff;
background: #47a3da;
margin-left: 5%;
}

HTML

<span class="showtext" data-content="Message">Hover Me</span>

I have set margin-left to 5% but it doesn't work all the time. It overlaps when the text inside span is longer, so how can I set it to auto margin-left a little, say 10px?

I have tried to set to auto but it didn't work. Also, how can I add a triangle at the left of the message so it points on the span text.

Tim S. Van Haren
  • 8,861
  • 2
  • 30
  • 34
user3452098
  • 268
  • 1
  • 3
  • 17

1 Answers1

0

Here, margin-left is applied to the left edge of the .showtext element. What you're trying to do is display the box 5% off the right edge, instead.

Simply change the :before selector to :after to solve your problem, so that your hover box is applied after the element rather than before it.

As for your second question, I'd recommend doing a search on SO for that; it has been answered more than once (I know; I've seen the questions).

TylerH
  • 20,799
  • 66
  • 75
  • 101