How to auto margin-left for the message bar

Tags: html,css

Problem :

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


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


<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.

Solution :

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).

    CSS Howto..

    How to line up a css ::before pseudo element like a grid

    How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

    TD Borders from a table, not showing in IE8 [duplicate]

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    CSS Web fonts how to use it with use of @font-face its not working

    How can I remove a parent with a certain child inside of it (media queries)

    How do I make :hover inside div style? [duplicate]

    How to change the css class=“current” when using page jumping (single page website)?

    How to get a button to fill the full width of the footer in Mobile View?

    How to fix my nav bar? Positioning is different on different screens

    How to avoid background image tile when browser window resizes

    Please help me understand how to make my first jquery slider

    how to stop CSS animation without javascript

    How to Make CSS Property Apply to Everything Within Bootstrap Navbar?

    Show HTML text if window width is too small with CSS

    how to build a mobile site - basics, is it all CSS?

    Modal box doesn't show completely

    How do you close the CSS preview view in Eclipse?

    How can I make DIV 100% height of browser without vertical scrolling of header

    What is the best way to store css data inside database and call it similar to how a css file would be

    page breaks and css - how to skip last page?

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How does floating and clearing on the same element work?

    How to style a list so that it looks like a table, with various line height?

    How to use a custom toggle switch in jquery mobile

    How to use ASP.NET DropDownList in Bootstrap navbar

    How to make a sticky footer using CSS?

    CSS HTML how to ignore some css for non ie7 or ie8