Search jQuery

jQuery Forum

jQuery Mobile

total_noob

Popup with CSS triangle

in jQuery Mobile • 3 months ago

Hi all,

I'm trying to add a triangle tooltip thingo above my popup box to make it look cool.

I have both the popup to work in the correct position below the button pressed and the CSS triangle to use but I don't know how to merge the two parts together to make it look nice.

My CSS (found on the web) for the triangle is:

div.tooltip-arrow-up {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #2f2f2f;
}

I tried putting the arrow all over the place but it just doesn't look right. Does anyone have any recommendations or tutorial online that I can look at?

BTW. I place the tool tip on the HTML like so:

<div class="tooltip-arrow-up"></div>

if that makes any different. I just now need to figure out where to put it.

Replies(9)

snehadb

Re: Popup with CSS triangle

3 months ago

You can use this

.triangle{

position: absolute;

top: -15px;

left: 50%;

margin-left: -15px;

border-bottom: 15px solid #002952;

border-right: 15px solid transparent;

border-left: 15px solid transparent;

}

<a href="#" data-rel="popup" id="btn1" data-icon="gear" class="ui-btn-right" data-mini="true">Options</a>

</ul>

</div>

total_noob

Re: Popup with CSS triangle

3 months ago

Hi snehadb,

Thanks for the response but sorry for such a late reply.

Your CSS works. But the issue is; if the button that opens the popup is on the side, JQM will move the popup so that it all fits on screen.

If I make the triangle to be left at 50%, that won't line up properly with the button pressed right? What do I do then?

Also, this is just a scenario that could happen. Not saying it has yet so I don't have any code to show. Just curious as to what I should do.

Thanks

snehadb

Re: Popup with CSS triangle

3 months ago

hi total_noob,

Sorry I didn't get what you want.If you post your code on http://jsfiddle.net so that I can see what is the issue and what you want exactly.

snehadb

Re: Popup with CSS triangle

3 months ago

Hi total_noob,

Please refer this http://jsfiddle.net/UfyBv/2/

total_noob

Re: Popup with CSS triangle

3 months ago

Hi snehadb,

Sorry I was initially unclear.

The scenario is if the popup is too big and the button that opens the popup is on the right; the triangle will not be pointing at the button that opened the popup since you made it sit at left 50%.

I changed your js fiddle to show what I mean. http://jsfiddle.net/UfyBv/3/

What should I do now to make it more dynamic for any button that opens a popup with a triangle?

snehadb

Re: Popup with CSS triangle

3 months ago

hi total_noob,

If you fix the right position of triangle in pixels instead of left position then it will work for any button.I have changed jsfiddle please refer it http://jsfiddle.net/UfyBv/4/

total_noob

Re: Popup with CSS triangle

3 months ago

Hi snehadb,

Fixing it to the right like that will only fix it for that button.

If I make a button that opens up the same (OR another popup but using the same triangle) and place it to the left, it won't look nice as seen in http://jsfiddle.net/UfyBv/5/

I'm asking if there's a way to place the same triangle for multiple popups where the buttons can be anywhere on the screen and still have it look like the triangle is pointing to the origin?

snehadb