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.
Related
I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?
This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;
Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}
Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.
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 am trying to make my modal to be responsive.
I am currently using "right: 405px" in css to make my modal to stick in the right section.
However, the position of the modal keep changes as the screen size of the browser changes, which means this is not responsive.
In the attached screenshot, you can see the "Google Translator Modal" when the "info icon" is clicked.
Could anyone help me write a responsive CSS code?
Thank you.
.google-translator-modal {
position: absolute;
background: #fff;
z-index: 10000;
right: 405px;
top: 40px;
width: 230px;
height: 50px;
border-radius: 3px;
}
<div class="google-translator-modal" style="display: none">
<span class="upward-white-triangle"></span>
<div class="google-translator-modal-content">
powered by
<a class="google-logo-link" href="https://translate.google.com" target="_blank">
<img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
Translate
</a>
</div>
</div>
This a crude example but it ultimately comes down to positioning an absolute positioned element inside of a relative positioned element and showing it on hover.
I have placed the "modal," what I would call a tooltip, inside of the element that appears to be triggering it's appearance. By placing the tooltip inside and relative to the element that triggers it, we don't have to worry about how far from the edge of the viewport we are. The tooltip will always be position relative to the icon in my example.
.translate {
float: right;
margin: 0 1.5rem;
}
.translate-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.translate-icon:hover .translate-tooltip {
display: block;
}
.translate-tooltip {
display: none;
position: absolute;
bottom: -1.75rem;
right: -0.35rem;
width: 13rem;
text-align: center;
font-size: 1rem;
border: 1px solid gray;
}
.translate-tooltip::before,
.translate-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
right: 0.25rem;
width: 0;
height: 0;
border: solid transparent;
}
.translate-tooltip::before {
border-bottom-color: gray;
border-width: 9px;
}
.translate-tooltip::after {
border-bottom-color: white;
border-width: 8px;
right: calc( 0.25rem + 1px );
}
<div class="translate">
Select Language
<span class="translate-icon">ω
<div class="translate-tooltip">
Powered by Google Translate
</div>
</span>
</div>
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.
You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/
You can use Jquery Tooltip:
Jquery Tooltip
Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html
Try this property it's asp but may work for your case
ErrorMessage="Your Message";
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;
}