Speechbubble tooltip in CSS - how to move the arrow


Tags: html,css,html5,css3,tooltip

Problem :

Hey there i created this little speech bubble tooltip, where the arrow is at the bottom:

http://jsfiddle.net/QNPYQ/

.bubble:after {
    border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 26px;
    bottom: -52px;
    content: "";
    display: block;
    height: 0;
    left: 4em;
    position: absolute;
    width: 0;
}

Anybody could tell me how to make the arrow at the top of the <div>?



Solution :

You could rotate the arrow and place it according to top

.bubble:after {
    border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 26px;
    top: -52px;
    content: "";
    display: block;
    height: 0;
    left: 4em;
    position: absolute;
    width: 0;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

An example : http://jsfiddle.net/QNPYQ/1/


    CSS Howto..

    How do I make this list not break lines when browser size is changed?

    how can i create true loop?

    How to remove hover effect from a column of a table

    How can I edit adjacent selector to a nested one

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    How to style a list within a menu?

    How to make CSS width to fill parent?

    How to Create 3 Column Layout with CSS Only?

    How can clients without Ruby view web pages using SASS?

    How do I make a nested
    expand to its contents?

    text-rendering in css, what is it? and how to use it?

    How to beautify this nested list with css?

    How to only have margin between child and not with parent in CSS?

    How to remove the background in a slick carousel?

    Google Chrome Package Apps : How to make transparent rounded background like google hangout app?

    CSS Transition - how to make a text coming from the top side?

    How to arrange dissimilar
    elements to flow inline inside an
    element

    When I click on each button its shows me the same content of the first button

    How to use one popup box to display arbitrary number of information respectively?

    How to make gridview and cells bigger?

    How do I achieve a fully working image scrolling effect like in this example?

    How to get the “absolute” position of an html element

    How to define cellspacing in CSS

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How to apply css style to jquery effect

    How to get the “text-justify:kashida” css property effect on to the arabic text excluding IE browsers

    How to use a hover css pseudo to apply only to the top level element?

    How to put a list of images in a fixed div

    Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

    How to add more items to the list without going to the next row? [closed]