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 can I have the text content of a div overflow in a HTML email template?

    How to embed SVG styling with javascript?

    How to change style of scroll-bar with a fixed position in angular

    How to add custom css/js to just one page in WordPress?

    How do I load a CSS file with HTMLTextWriter

    How to programmatically check CSS styles for particular elements? [duplicate]

    How to make my delete buttons responsive and stay absolute on my thumbnails

    How can I use Modernizr to get border-radius working in IE8?

    how to vertically align footer contents with css

    How to apply rounded borders to highlight/selection

    How can I customise jquery loupe to have a circular lens?

    How to align in “rubber” layout with narrow screens?

    How to remove CSS spaghetti in legacy web app?

    How to give different views for same url for different devices with same resolution?

    How to apply CSS to anchor with active class only (parent only) and not include children?

    How to remove the border line around the element in html and css?

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]

    How to center the Nav-Bar

    Can't figure out how to code my css

    how to change single li element in a menu using lists?

    How do I add box shadows when the parent div has a background image?

    CSS: How to set several div's in one line with 100% width?

    show button instead of menu bar when browser resize in css/html [closed]

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

    How can i give transparency effect in CSS?

    How to remove white border from blur background image

    How to edit css files using php safely?

    How can I align a div right under another?

    How to highlight spaces in a tag? (CSS only)

    How do you make a button increase in size (125%) for few milliseconds and then return it original size on click?