How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery
Tags: javascript,jquery,css,twitter-bootstrap
Problem :
I tried the various answers from the other questions posted on stack overflow, but haven't found any luck yet in positioning the tip arrow of the bootstrap popover. html:
<input type = "text" id="account_create"/>
js:
$('.popover').css({
'top': $('#account_create').offset().top + 'px',
'left': $('#account_create').offset().left +'px'
}).fadeIn(300);
The above code for inlining the popover with the text field. however this is what im getting:
Ideally i would want to align the popover and the arrow next to the text field ( the first one), but it constantly keeps jumping next to the second text field.
Any ideas, suggestions on how this can be achieved??
Thanks~
Solution :
Simply place both the input field and popover in the same div and give that div position relative and the popover position absolute then left 0
<div class="parent">
<input>
<div class="popover"></div>
</div>
.parent {
position: relative:
}
.popover {
position: absolute;
left: 0;
}
CSS Howto..
You can use: table input { font-size: 13px; } ...
Simple. Add one class for your table and apply the styles through css. var $table="<table class='mystyles' border=5><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" +...
If there's a certain style your div element will always have, you can use the *= attribute selector which will match part of the element's style: div[style*="float:"] { display: none;...
#map_canvas { width: 500px; height: 370px; border: 1px solid #ccc; } .left { float: left; border: 1px solid blue; } <div class="left">Not #map_canvas</div> <div id="map_canvas" class="left">This is #map_canvas .left</div> http://jsfiddle.net/94dwn/3/...
You can manage it with Javascript: var links = document.getElementsByTagName("a"); for(var i = 0; i < links.length; i++) { if(links[i].className == "hoverThis") { DoHover(links[i]); } } function DoHover(link_element){ link_element.onmouseover =...
Since .css()returns a string must use javascript string methods. There are pretty much out there pick one. indexOf, match, regular expressions $(el).css('text-decoration').indexOf('line-through') // returns -1 if not found ...
the .pac-container's will be appended to the body, using the form within the selector will not match these div's You may use the nth-last-child-selector to apply a different style. Example...
take a look: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ then use float:right on the image...
I'm guessing you mean to have to the element slide away on hover, and slide out when the mouse leaves? I suggest putting the :hover on the parent element: *:hover...
I believe it has to do with them adding img{ max-width: 100%; } suggested fix was this: #mapContainer img{ max-width: none; } see here https://github.com/twitter/bootstrap/issues/1552 [update] Looks like the release...
You're missing the duration and you have a trailing space in the name you assign: function colorchange( test ) { test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here...
#one{ background-color:green; color:white; height:40px; } #two{ background-color:red; color:white; height:40px; display:in-line; } #one:hover + #two { display:none; } <div id="main"> <div id="one"> <p>Hover to hide div below</p> </div> <div id="two">...
Use a setTimeout and a clearTimeout. var t = null; window.onResize(function() { if (t!= null) clearTimeout(t); t = setTimeout(function() { ... }, 500); }} During the dragging the timeout is...
From the jQuery source - CSS opacity. fadeTo: function( speed, to, easing, callback ) { return this.filter(":hidden").css("opacity", 0).show().end() .animate({opacity: to}, speed, easing, callback); ...
h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next...
Simply adjust your CSS targets to be tab specific: .tab-about h2 { /** ... **/ } .tab-about p { /** ... **/ } .tab-home h2 { /** ... **/ }...
I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling...
There are a lot of ways to this, but if you choose to do it with CSS, you'll have to trust the screen-width to identify the devices, and that can...
change .navbar-nav > li{ float:left } to .navbar-nav > li{ display: inline-block !important; vertical-align: middle !important; } it would help if you make that humongous logo a bit (lot) smaller,...
Your code looks mostly fine to me. As others have suggested, you're missing <li></li> inside of your <ul>. Also, there is a typo in your CSS: text-aling should be text-align....
Use height: auto #accordion div:hover { height:auto; /* THIS NEEDS TO ADJUST AUTOMATICALLY */ } ...
Replace this code $('[id=selectedTab]').addClass('selected'); with $('[id='+selectedTab+']').addClass('selected'); or with $('#'+selectedTab).addClass('selected'); You have your selected tab id in selectedTab variable, but you are using it as literal, so concat this selectedTab with...
I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason. http://cdpn.io/IJHxf This is essentially where I got the...
Why don't you enclose the two tables into one table with two cells? Set the outer tables so the <td> are 50/50 width. Set the inner tables to be 100%...
An extension of Koen's solution ... and stays after clicked as well ... you need to re-position/style the labels (and add your stars), hide the inputs, but it's CSS only...
body { font-family: "Century Gothic",Helvetica,Arial,sans-serif; margin: 0; padding: 0; font-size: 1em; background:url(smiley.gif) 0 0 no-repeat; background-size: 100%; } Here background-size only support for CSS3....
Okay so in order to stack them side by side, you need to give them a span of 6 columns each or as you require but the sum must be...
Why you won't try to use display:table attribute to your overlay div and display:table-cell to fontawesome i class? as below: #overlay { width: 100%; height: 100%; display:table; background: rgba(0, 0,...
for responsive design use bootstrap plugin and its classes in your UI. refer link
How I would handle this is to have the user be able to provide a get parameter to select the css file form a server, e.g. http://www.YourSite.com/page/?css-file=http://www.site.com/path/to/file.css And based on...