Develop Reference

Expanding searchbar - keep expanded state if text is entered

Working on a searchbar that has a default collapsed state and, when clicked, expands with an animation, and collapses again when it is no longer focused.
How do I make it so that when you have entered some text into the search field, and you click outside of the input, the searchbar maintains its expanded state if text is present?
body {
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height 100vh;
width: 100%;
padding: 3rem 0;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<form id="demo-2">
<input type="search" placeholder="Search">
</form>

Use :valid selector and minlength and required attribute.
body {
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height 100vh;
width: 100%;
padding: 3rem 0;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:valid, /* added */
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<form id="demo-2">
<input type="search" placeholder="Search" minlength="1" required>
</form>

To anyone looking for a js solution because they need to target inputs containers and can't use :focus :valid and such css elements, here is a solution (css not done)
const events = () => {
document.addEventListener('click', event => {
if (event.target.closest('input')) {
event.target.closest('.field').classList.add('open');
} else {
document.querySelectorAll('.field').forEach(el => {
if (el.querySelector('input').value.length == 0) {
el.classList.remove('open');
}
})
}
})
}
events();
<form>
<div class="field">
<input type="text" value="">
</div>
<div class="field">
<input type="text" value="">
</div>
</form>

How to make this Gauge differential angles?

I am creating a radial gauge for a dashboard. The following code is my work.
I need to know how to make the starting angle of this to be 15 degrees and how to make the ending angle 165 degrees. Please help me with it.
I need to implement this system so looking forward to getting this done.
I also need to add the tick marks t this. How can I do it? I am trying to use Chart JavaScript for that so please guide me on how can i do it?
Regards.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>

Please check may be you want this
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(15deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(165deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>

You need to change 2 things at your css
1 - for ID #needle
transform: rotate(15deg);
2 - for hover #radial:hover span
transform: rotate(165deg);

Horizontally expand input on click with bootstrap animation?

I found some examples of expanding a textarea vertically using bootstrap.
I would like to horizontally expand a text input from this [..] to this [........] on click event with an animation.
Is there something in bootstrap that would simplify this or do I have to roll my own?

I ended up using pure css from codepen by someone named Prinzadi
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>

Display Tooltip after a Click instead when Hover

I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:

Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE

Customize toggle button in Bootstrap using only CSS?

I have a demo that uses the toggle dropdown button of bootstrap. I've customized the bootstrap.css but not boostrap.js. Can I use toggle without boostrap.js?
Demo
Here is the snippet:
$(document).ready(function() {
$('#firstvalue').addClass('user-click');
$('#usr').val("(" + $("#firstTag").text() + ")");
$('#demolist li a').on('click', function() {
$('.user-click').removeClass('user-click');
$(this).find('.user-check').addClass('user-click');
$('#usr').val("(" + $(this).text() + ")");
});
});
.user-check {
cursor: pointer;
display: block;
height: 16px;
margin: 0px 0px 0px 0px;
outline: 0 none;
padding: 8px 5px 0px 0px;
position: relative;
top: 1px;
width: 16px;
z-index: 1;
float: left;
}
.user-click:before {
bottom: 10px;
content: "\2713";
display: block;
position: relative;
right: 0px;
transform: rotate(15deg);
transition: all 1s ease-out 0s;
width: 14px;
font-size: 15px;
color: #444444;
}
.btnAlpha-inverse {
color: #fff;
height: 20px;
width: 20px;
background-color: #444444;
border-color: #444444;
/*set the color you want here*/
}
.btnAlpha-inverse:hover,
.btnAlpha-inverse:focus,
.btnAlpha-inverse:active,
.btnAlpha-inverse.active,
.btnAlpha-inverse.disabled,
.btnAlpha-inverse[disabled] {
color: #ffffff;
background-color: #444444;
*background-color: #444444;
}
.btnAlpha-small {
padding: 2px 10px;
font-size: 11.9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
text-decoration: none;
color: #444444;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -o-linear-gradient(top, #f5f5f5, #f5f5f5);
/* background-image: linear-gradient(to bottom, #0088cc, #0077b3); */
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.btnAlpha-groupAlpha-lg>.btnAlpha,
.btnAlpha-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px
}
.btnAlpha-groupAlpha-sm>.btnAlpha,
.btnAlpha-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-groupAlpha-xs>.btnAlpha,
.btnAlpha-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-block {
display: block;
width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha>.btnAlpha {
position: relative;
float: left
}
.btnAlpha-groupAlpha-vertical>.btnAlpha.active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:focus,
.btnAlpha-groupAlpha-vertical>.btnAlpha:hover,
.btnAlpha-groupAlpha>.btnAlpha.active,
.btnAlpha-groupAlpha>.btnAlpha:active,
.btnAlpha-groupAlpha>.btnAlpha:focus,
.btnAlpha-groupAlpha>.btnAlpha:hover {
z-index: 2
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-left: -1px
}
.btnAlpha-toolbar {
margin-left: -5px
}
.btnAlpha-toolbar .btnAlpha,
.btnAlpha-toolbar .btnAlpha-groupAlpha,
.btnAlpha-toolbar .input-group {
float: left
}
.btnAlpha-toolbar>.btnAlpha,
.btnAlpha-toolbar>.btnAlpha-groupAlpha,
.btnAlpha-toolbar>.input-group {
margin-left: 5px
}
.btnAlpha-groupAlpha>.btnAlpha:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child {
margin-left: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:last-child:not(:first-child),
.btnAlpha-groupAlpha>.dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha {
float: left
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha .dropdown-toggle:active,
.btnAlpha-groupAlpha.open .dropdown-toggle {
outline: 0
}
.btnAlpha-groupAlpha>.btnAlpha+.dropdown-toggle {
padding-right: 8px;
padding-left: 8px
}
.btnAlpha-groupAlpha>.btnAlpha-lg+.dropdown-toggle {
padding-right: 12px;
padding-left: 12px
}
.btnAlpha-groupAlpha.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btnAlpha-groupAlpha.open .dropdown-toggle.btnAlpha-link {
-webkit-box-shadow: none;
box-shadow: none
}
.btnAlpha .caret {
margin-left: 0
}
.btnAlpha-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0
}
.dropup .btnAlpha-lg .caret {
border-width: 0 5px 5px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
display: block;
float: none;
width: 100%;
max-width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
float: none
}
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-top: -1px;
margin-left: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:not(:first-child):not(:last-child) {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btnAlpha-groupAlpha-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate
}
.btnAlpha-groupAlpha-justified>.btnAlpha,
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha {
display: table-cell;
float: none;
width: 1%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .btnAlpha {
width: 100%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .dropdown-menu {
left: auto
}
[data-toggle=buttons]>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha input[type=radio],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=radio] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none
}
.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical {
position: relative;
display: inline-block;
vertical-align: middle
}
.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:first-child>.dropdown-toggle,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha:not(:last-child)>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group-addon:first-child {
border-right: 0
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha:not(:first-child)>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha:not(:first-child),
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:last-child>.dropdown-toggle {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group-addon:last-child {
border-left: 0
}
.input-group-btnAlpha {
position: relative;
font-size: 0;
white-space: nowrap
}
.input-group-btnAlpha>.btnAlpha {
position: relative
}
.input-group-btnAlpha>.btnAlpha+.btnAlpha {
margin-left: -1px
}
.input-group-btnAlpha>.btnAlpha:active,
.input-group-btnAlpha>.btnAlpha:focus,
.input-group-btnAlpha>.btnAlpha:hover {
z-index: 2
}
.input-group-btnAlpha:first-child>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha {
margin-right: -1px
}
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha {
z-index: 2;
margin-left: -1px
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha {
margin-left: -1px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:before,
.btnAlpha-toolbar:after,
.btnAlpha-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
display: table;
content: " "
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-toolbar:after,
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
clear: both
}
.btnAlpha-groupAlpha-xs>.btnAlpha .badge,
.btnAlpha-xs .badge {
top: 0;
padding: 1px 5px
}
a.badge:focus,
a.badge:hover {
color: #fff;
text-decoration: none;
cursor: pointer
}
.open>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.ul {
margin-top: 0;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
}
.list-unstyled {
padding-left: 0;
list-style: none
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px
}
<div class="dropdown btnAlpha-groupAlpha">
<button class="btnAlpha btnAlpha-small btnAlpha-inverse dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
V
</button>
<ul class="dropdown-menu" id="demolist">
<li class="dropdown-header">Search in:</li>
<li>
<a href="#" id="firstTag">
<div class="user-check" id="firstvalue"></div>Korean</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Chinese</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Japanese</a>
</li>
</ul>
<input type="text" class="form-control" id="usr">
</div>