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 move an image from left to right and right to left in javascript for infinite time?

    Responsive Design - how to get my image on left to take up whole screen

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How to align / valign css-rotated span within its parent div

    how to highlight currently opened page link in css

    How to add a css on a div by finding a children class on its sibling div by jquery

    onsen ui 2 : how to implement android style scrollable tabbar?

    How to use a backslash in css content property?

    Preventing jquery's show/hide from adding inline style?

    How to apply CSS style when ID is taken?

    How to hide

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How to make a div take the remaining height without knowing the height?

    PHP: How to style session output [closed]

    How to get CSS to select ID that begins with a string (not in Javascript)?

    How to get item to appear on mobile homepage only(wordpress)

    How did Google make these 3d buttons? [closed]

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    IE11 shows every display: table-cell element at a new line

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to output CSS files to single directory from several input directories?

    how to get by title attribute

    jQuery (or JS) - How to get only elements that are certain colour from an array?

    How to increase cell height of GWT celltable : Issue with IE?

    How to get a working CSS zigzag border?

    How can we retrive style from css by selector without creating element?

    How to change H3 color in bootstrap using CSS file

    How to change placeholder color in css

    How to set the background-image of this text to an svg?

    How to dynamically scale images per height using pure CSS?