How to locate a pointed div element in css


Tags: html,css,css3

Problem :

I need help in designing my div element as my tooltip. Below are my css scripts which has a design where the pointed arrow is on the left side of the div. How do I transfer the pointed arrow of the div on the right side? Thanks...

<div id="tooltip" style="display:none" class="balloon">  
<div class="arrow"></div>
   Content of my tooltip

</div> 

CSS:

.balloon
    {  
    background: #ccc;  
    height:80px;
    border-radius: 4px;  
    -moz-border-radius: 4px;  
    -webkit-border-radius: 4px;  
    position:absolute;
    padding: 20px;  

    font-size: 12px;  
    width: 300px;  
    text-align: justify;  
    color: #3a3a3a; 

    z-index: 200; right: 0; top: 360px; left: 600px
    }  

  .balloon .arrow 
    {  
    border-color: transparent #CCCCCC transparent transparent;  
    border-style: solid;  
    border-width: 10px;  
    display: block;  
    height: 0;  
    left: -20px; 
    position: absolute; 
    top: 20px;  
    width: 0;  
   } 


Solution :

Try This: - DEMO

.balloon {
    background: #ccc;
    height:80px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position:absolute;
    padding: 20px;
    font-size: 12px;
    width: 300px;
    text-align: justify;
    color: #3a3a3a;
    z-index: 200;
    right: 0;
    top: 50px;
    left: 50px
}
.balloon .arrow {
    border-color: transparent transparent transparent #CCCCCC;
    border-style: solid;
    border-width: 10px;
    display: block;
    height: 0;
    right: -20px;
    position: absolute;
    top: 20px;
    width: 0;
}
<div id="tooltip" class="balloon">
    <div class="arrow"></div>
    Content of my tooltip
</div>


As @misterManSam suggested in his comment you could also make it a pseudo arrow element instead.

JSFiddle - DEMO


    CSS Howto..

    How to make a background text appear under youtube video?

    How to make an image follows scrolling until a certain point

    How do I set a different background to current tab?

    how can i add class to errorsummay without remove header message

    How do I display an image over a table cell that's larger than the cell?

    How to @import without including all CSS but just the @extends ones

    How to achieve cellpadding with divs or likeiwse?

    How to use different CSS opacity in a nested div? [duplicate]

    How to dynamically change CSS style attribute of DIV tag?

    How can I refactor some repetitive HTML and CSS?

    how to load all css and js at a time in Cakephp

    How to play specific keyframes with css animation

    Show/Hide Markers that are pulled from function

    How load a table into multiple webpages using HTML?

    How to link a header in a standards-compliant way?

    How to apply CSS to my JQuery Plugin

    How do I put an image on top of an image without using absolute positioning?

    How to have a background image properly fade in with CSS

    How can i make this css star smaller?

    How can I show only a section of a video frame with CSS or JavaScript?

    How can I get Sitecore Field Renderer to use a css class for an image

    Japanese Text not showing correctly

    How to copy the CSS to another tab in Chrome?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How to debug css in IE?

    How to make Zig Zag borders using CSS? [closed]

    How to expand toggle sidebar more

    How can i make these tabs Responsive

    How to apply diffrent css style on different events of an asp button?

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?