While searching on Google, the autocomplete results show up below, just like many other sites.
But apart from that, there's a faded text autocomplete for the most probable search query that appears in the input box itself without changing the position of the cursor. See the attached screenshot. I checked the console, but nothing useful there.
How is an effect like that achieved?
Google does it by setting the value of a separate input element which is stacked directly behind the "active" one. If you look at the source, you can see there are a number of elements in the same place:
<div id="gs_lc0" style="position: relative;">
<input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;" dir="ltr" spellcheck="false">
<div class="gbqfif" style="background-color: transparent; color: transparent; padding: 0px; position: absolute; z-index: 2; white-space: pre; visibility: hidden; background-position: initial initial; background-repeat: initial initial;" id="gs_sc0"></div>
<input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px;" id="gs_taif0" dir="ltr">
<input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px; visibility: hidden;" id="gs_htif0" dir="ltr">
</div>
It's the second <input> that seems to be handling the greyed-out suggestion text.
This is done by two inputs and CSS property position: absolute. One input has black color and contains current user input, and second input has gray color and lies beneath first input.
The CSS for that may look like following:
input.user-input {
position: absolute;
background: transparent;
color: #000;
z-index: 2
}
input.suggest-input {
position: absolute;
color: #ccc;
z-index: 1
}
Related
So I have a textarea with placeholder text like this:
<textarea tabindex="4" placeholder="Type here. Use Markdown,
BBCode, or HTML to format. Drag or paste images." id="ember1313"
class="d-editor-input ember-text-area ember-view"></textarea>
I'm thinking my users probably won't know Markdown, BBCode, or HTML. It would be awesome if I could turn these words into links to articles explaining each one. A separate tool tip onmouseover of each of these three words might work as well.
try this
$('textarea').blur(function() {
var inputVal = $(this).val(),
titleText = $(this).attr('placeholder');
if ( inputVal != '' ) {
$(this).tooltip({
title: titleText,
trigger: 'focus'
});
}
});
Like this :
Working Fiddle Link
Html :
<textarea tabindex="4" title="Type here. Use Markdown,
BBCode, or HTML to format. Drag or paste images." id="ember1313"
class="d-editor-input ember-text-area ember-view"></textarea>
CSS :
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
You can implement Tooltip (as the intention is to show information to the end-users) provided by bootstrap :https://v4-alpha.getbootstrap.com/components/tooltips/
OR Jquery Tooltips: https://jqueryui.com/tooltip/
Examples are mentioned there for your reference.
See the updated fiddle i hope it helps you :
Fiddle
$('textarea').hover(function(){
$('.d-editor-input').tooltip({
title: titleText,
trigger: 'focus'
});
})
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea tabindex="4" title="Type here. Use Markdown,
BBCode, or HTML to format. Drag or paste images." id="ember1313"
class="d-editor-input ember-text-area ember-view"></textarea>
I need to develop a view with similar tooltip which is on github.
I tried using the css but was not able to create the exact ui.
My CSS is as follow
[tooltip] {
display: inline;
position: relative;
}
[tooltip]:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 99;
white-space: nowrap;
}
[tooltip]:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
Please advise how can I get the same effect.
For what is worth if you consider bootstrap, similar, or a partial bootstrap installation or related classes, you can achieve this like this:
HTML
<div class="container">
<div class="col-xs-4 col-xs-push-4 martop50">
<div class="input-group">
<span class="input-group-addon">https://</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><i class="fa fa-clipboard" data-toggle="tooltip" data-placement="bottom" title="Copy to clipboard"></i></span>
</div>
<span class="download-btn"><button class="btn btn-sm" ><i class="fa fa-download"></i></button></span>
</div>
</div>
CSS
.martop50{
margin-top:50px;
}
.download-btn{
display:inline;
float: left;
margin: 0px 2px;
}
.btn-group-sm>.btn, .btn-sm {
padding: 7px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
width: 88%;
float: left;
}
Tooltip JQUERY
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
The rest of your work would be practically cosmetics and replacing the http:// with a dropdown. That should be fairly easy for you to do.
Here is the DEMO
Try removing , adjusting left:20% , also possibly padding: 5px 15px; at [tooltip]:hover:after
Here's a tooltip that opens downwards.
[tooltip] {
display: inline;
position: relative;
border-bottom: 1px dotted rgba(0,0,0,.21);
}
[tooltip]:hover {
border-bottom: 1px solid transparent;
}
[tooltip]:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
top: calc(100% + 3px);
color: #fff;
content: attr(tooltip);
left: 50%;
transform: translateX(-50%);
padding: 5px 15px;
position: absolute;
z-index: 99;
white-space: nowrap;
box-sizing: border-box;
}
[tooltip]:hover:before {
border: solid;
border-color: transparent transparent rgba(0,0,0,.8);
border-width: 6px;
bottom: -3px;
left: calc(50% - 3px);
content: "";
position: absolute;
z-index: 99;
}
<div tooltip="I am tooltip">
I am some content.
</div>
<hr>
Let's see a tooltip on an <span tooltip="Hey, I'm a tooltip, too!">inline element.</span>
However, the way to go here is to have tooltip arguments on the html element and build specific positioning rules for your alignment params (You probably want to have tooltip-position attribute set to top|bottom|left|right and have specific CSS for each case). For example:
[tooltip][tooltip-position="bottom"]:hover:after { /*code here*/ }
From the looks of it, considering the required coding effort and your apparent CSS knowledge, using a library might save you some time. Possible candidates:
Bootstrap Tooltip
jQuery tootip
tooltipster
qtip2
tipped
tooltipsy
These are only a few examples, I'm not endorsing any of them and there are plenty of others. You should research this yourself and decide based on your projects' needs.
I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/
Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/
Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )
I have a div on which i can type text using span and textarea(which is hidden). I am calling this div onclick function. What i want is on each click i should see a div or span. i.e. multiple divs on the same page.
CODE:
<div class="EaDetail EaDetailText" style="left: 299px; top: 80px; font-size: 17px; width: 126px; height: 23px; position: absolute; display: block;">
<div class="EaDetailInset">
<span style="font-size: 17px;">
<br>
</span>
<textarea></textarea>
</div>
</div>
<input type="button" onclick="addTextBox()" value="Add">
Javascript Code:
function addTextBox()
{
$('.EaDetailInset').show();
}
CSS:
.EaDetail, .EaDetailDisabled {
border: 1px dashed transparent;
font-size: 12px;
overflow: visible;
position: absolute;
display:none;
}
.EaDetail {
border-radius: 3px 3px 3px 3px;
}
.EaDetailInset {
display: none;
max-height: 65px;
padding-bottom:5px;
border: 2px dashed #AAAAAA;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.EaDetailText textarea, .EaDetailText span {
font: 100%/1.1 arial,sans-serif;
position: absolute;
white-space: pre;
}
.EaDetailText textarea, .EaDetailText textarea[disabled] {
background: none repeat scroll 0 center transparent;
border: 0 none;
bottom: 6px;
box-shadow: none;
color: #000000;
display: block;
height: 200%;
left: 6px;
line-height: 1.1;
outline: 0 none;
padding: 0;
resize: none;
right: 6px;
top: 6px;
transition: none 0s ease 0s;
width: 200%;
}
<div class="EaDetail EaDetailText" style="left: 299px; top: 80px; font-size: 17px; width: 126px; height: 23px; position: absolute; display: block;">
<div class="EaDetailInset">
</div>
</div>
<input type="button" onclick="addTextBox()" value="Add">
function addTextBox()
{
var newTextBoxdiv = $(document.createElement('div')).attr("class",'EaDetailInset');
newTextBoxdiv.html('<span style="font-size: 17px;"><br></span><textarea></textarea></span>');
newTextBoxdiv.insertAfter(".EaDetailInset");
$(".EaDetailInset").show();
}
see if this works
first of all, you need to call the javascript function correctly:
change
<input type="button" onclick="addTextBox" value="Add">
into
<input type="button" onclick="addTextBox()" value="Add">
If you want to have multiple textarea/span, you need to create and append child elements to your div, what you are doing is just show/hide that will not replicate the elements.
var txt = document.createElement('textarea');
document.getElementById('myDiv').appendChild(txt);