We Keep Coding

Bootstrap tooltip arrow customization / tooltip positioning

I am using bootstrap tooltip to display a tooltip with an image in it. I am so far this much successful
How ever my requirement looks like this
I need to move the arrow upward so it matches the design, Is there a way we can customize the position of the arrow ?
The below function works on mouseoverevent
function showToolTip(elem) {
var ttContent = '<img class=\'ttImage\' src=\'http:\/\/getbootstrap.com\/apple-touch-icon.png\' \/>';
$(elem).addClass("filter-text-highlight");
if (!$(elem).parent('a.ttTooltip').length) {
$(elem).wrap('<a data-toggle=\"tooltip\" class=\"ttTooltip\" style=\"text-decoration:none\" title=\"' + ttContent + ' \">');
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'right',
html: true,
});
$(elem).tooltip().mouseover();
}
}

You can create your own tooltip that gives you more freedom. and it's pretty easy.
here is sample snippet. you just have to change opacity on hover a div.
.parent{
position:relative;
display:inline;
}
.tooltip{
opacity:0;
position:absolute;
right:-180px;
top:0;
background-color:#cccccc;
height:40px;
width:150px;
text-align:center;
padding-top:5px;
}
.tooltip::before{
content:"";
width: 0;
height: 0;
border-style: solid;
position:absolute;
left:-20px;
border-width: 10px 20px 10px 0;
border-color: transparent #cccccc transparent transparent;
}
.hover:hover + .tooltip{
opacity:1;
}
<div class="parent">
<button class="hover">Hover Me</button>
<div class="tooltip">hello World</div>
</div>

javascript pop up a div element in the center of the webpage

How could I pop up a div element in the center of the webpage.
also .I need a button on the div to close the div element.
and the div element will not affect the webpage at all.
In my JS code, I already have a div element created.
var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";
$(div).addClass("GridTableContent");
I want to pop up the div element I created in the center of my webpage.
and add a close the div button.
Update
I Think I need to provide more detail about the problem
First,this code are injected into a webpage in a chrome extension so it's pure javascript
surely I can't write this
<div class='overlay'>
<div class='popup'>
<div class='close'>✖</div>
<h2>Popup</h2>
</div>
It'a all created dynamically,so I guess I can't use the code provided below.
I see other question before ,someone suggest me to use
http://www.ericmmartin.com/projects/simplemodal-demos/
and I find the BASIC MODAL DIALOG in that page is good ,
Is there any way to use that .
Update
I find I need to give the more detailed information.
At first I create a button and already injected into a webpage
var div = document.getElementById("btnSearch");
var input = document.createElement('input');
input.id='visualization';
input.type='button';
input.value='visualiztion';
$(input).insertAfter(div);
Then I create a div element
var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";
How can I do this,when I'm click the button then the div element popup at the webpage in the center.also I guess I need to create a button to close the div element.

Try Something like this
HTML
<div class='overlay'>
<div class='popup'>
<div class='close'>✖</div>
<h2>Popup</h2>
</div>
Show
CSS
*{
margin:0;
}
html, body {
height:100%;
}
.overlay {
position:absolute;
display:none;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0, 0, 0, 0.8);
z-index:9999;
}
.close {
position:absolute;
top:-40px;
right:-5px;
z-index:99;
width:25px;
height:25px;
cursor:pointer;
color: #fff;
display: inline-block;
}
.popup {
position:absolute;
width:50%;
height:50%;
top:25%;
left:25%;
text-align:center;
border-radius: 10px;
background:white;
box-shadow: 0px 0px 10px 0px black;
}
.popup h2 {
font-size:15px;
height:50px;
line-height:50px;
color:#fff;
background:rgb(24, 108, 209);
border-radius:10px 10px 0px 0px;
}
.button {
width:50px;
height:50px;
color:#fff;
font-weight:bolder;
border-radius:10px;
background:silver;
}
SCRIPT
$('.button').click(function () {
$('.overlay').show();
})
$('.close').click(function () {
$('.overlay').hide();
})
DEMO
Update
Dynamic injection:
DEMO

Height auto is not working in a background div

FIDDLE
I want to show a div which background is transparent, and the transparency is not affect on the top of the particular div. so i use the following html and css.
<div id="content">
<div id="transparncy"></div>
<div id="contentdata">
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
Css
#content {
width:100%;
position:relative;
color:#37475e;
}
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#contentdata {
position:relative;
width:100%;
}
#left {
width:50%;
float:left;
}
#right {
float:right;
width:35%;
}
My problem is that when i add more data in #contentdata , i can adjust the height of #transparncy proportional to that (cant increase the background transparent div). How can i solve this problem. Please help me

Instead of giving new blank div to transparency, add the same class name to id="contentdata" div and make background: rgba( 255, 0, 0, 0.4); this will not apply transparency to text but only for bg
HTML
<div id="contentdata" class="transparncy">...</div>
CSS
#contentdata .transparncy {
background: rgba( 255, 0, 0, 0.4);
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
}
DEMO

Correct answer updated Fiddle (http://jsfiddle.net/JyZ67/8/)
The main problem is you use the <div id="transparncy"></div> not properly
<div id="transparncy">
contentdatas....
</div>

This issue can be solved by adding bottom:0 to the #transparncy part of the CSS.

The problem is quite simple and relevant to ask
You have used min-height : 250px;
no matter what the height of inner/child conteht or div is parent div with min-height in your case #content #transparncy will take minimum height of 250px
just remove min-height and i will work as height auto :)
updated code :
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}

jquery animate width disrupts the flow of other elements

I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.
Here's the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.
$('.tile').on('click', function(){
$(this).find('.sparkline').show();
$(this).animate({
width : '326px'
},
600,
function(){
});
});
JSFiddle
All the Less:
.tiles{
.tile{
display:inline-block;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
.origMetrics{
width:154px;
display:inline-block;
}
.sparkline{
display:inline-block;
width:154px;
height:53px;
float:right;
}
.seperator {
margin: 0 15px 5px 15px;
border-color:black;
}
.metrictitle{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.metricvalue {
display:inline-block;
text-align:left;
width:auto;
margin-left:10px;
font-size:25px;
}
.metrictrend {
float:right;
margin-right:10px;
margin-top:5px;
}
.positive{
color:green;
img{
position:relative;
bottom:15px;
left:15px;
}
}
.negative{
color:red;
img{
display:none;
}
}
.even{
img{
display:none;
}
}
}
}

Try placing the showing of the sparkline div inside of the .animate() complete callback function.
The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.
For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.
$('.tile').on('click', function () {
$(this).animate({
width: '326px'
}, 600, function () {
$(this).find('.sparkline').fadeIn();
});
});
In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.
.tile{
display:inline-block;
vertical-align: top;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
}
jsfiddle

Use javascript to click on a pseudo-element?

I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
Link: http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div:before { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){
var $me = $(this),
width = $me.outerWidth(),
height = $me.outerHeight(),
top = $me.position().top,
left = $me.position().left;
var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));
if (len < 10)
alert('ding');
});​

A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div span { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
Something like this might work:
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
.parentDivToOrangeCircle { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
.orangeCircle {
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

Do simply like using jquery
$(document).on("click", "span", function(e){
if (e.offsetX > $(this)[0].offsetWidth) {
alert('clicked on after');
}
else
{
alert('clicked on main span');
}
})
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>

My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
My working sample as same as the problem statement: See Fiddle
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :before in the HTML, just showing to understand.
CSS:
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}
div.childDiv{padding:20px; margin:0}
jQuery:
jQuery(document).ready(function($){
$('div.parentDiv').click(function(e){
if( $(e.target).closest('.childDiv').length==0 ){
//so clicked on psudo :before element!
//do your work here ;)
alert('Psudo :before element is clicked!');
}
});
});