I am using Tooltip to display text when hover over exclamation symbol as shown in the video. Problem is I see orange border appears when I click on the component.
How can I get rid of that border and show tooltip only when click on symbol?
Live Demo - https://screenrec.com/share/yj3OQE2hxw
Code
.tooltiptext {
width: 275px;
height: 141px;
background: -colors.$white;
border: 1px solid rgb(220, 220, 220);
border-radius: 3px;
text-align: start;
color: -colors.$black;
font-weight: normal;
font-family: -fonts.$-font-family-regular;
letter-spacing: 0px;
line-height: 22px;
box-shadow: 0px 4px 6px 0px rgba(34, 34, 34, 0.1);
margin-left: -150px;
bottom: 125%;
visibility: hidden;
position: absolute;
padding: 10px;
}
.tooltip .tooltiptext:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
border-width: 7px;
border-style: solid;
border-color: -colors.$white transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.toolClass {
display: inline-block;
height: 18px;
width: 18px;
transform: translateY(3px);
svg {
fill: #cdcdcd;
}
}
<div class="btn-text">
{{ Data 1 }}
<div class="toolClass tooltip" tooltip tooltipPlacement="top">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16">
<path d="M9,4c2.8,0,5,2.2,5,5s-2.2,5-5,5s-5-2.2-5-5S6.2,4,9,4 M9,2C5.1,2,2,5.1,2,9s3.1,7,7,7s7-3.1,7-7 c0-1.9-0.7-3.6-2.1-4.9S10.9,2,9,2z M8,8.5v4.4h2V8.5H8z M8,5.2v2h2v-2H8z"/>
</svg>
<span class="tooltiptext">{{This product is related to Amazon}}</span>
</div>
</div>
Related
Based on a few examples here and there I made one o those search elements in which there's only the icon visible and the text field slides to the right when hovering either the icon or its parent element:
#import URL( 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css' );
:root {
--darker-gray: 22, 22, 22; /** #191919 */
--mid-gray: 89, 89, 89; /** #595959 */
}
header .top {
background-color: rgba( var( --darker-gray ) );
-webkit-box-shadow: 0 3px 5px -2px #0D0D0D;
box-shadow: 0 3px 5px -2px #0D0D0D;
color: rgba( var( --light-text ) );
padding: 2.5rem;
position: fixed;
top: 0;
width: 100%;
}
.wrapper input {
background: transparent;
border: none;
color: rgba( var( --mid-gray ) );
cursor: pointer;
display: inline-block;
font-size: 2rem;
height: 3.75rem;
left: 2.5rem;
outline: none;
position: absolute;
top: 0;
transition: all .5s;
width: 0;
z-index: 3;
}
.wrapper svg {
cursor: pointer;
margin-top: -1.5rem;
position: relative;
top: -1px;
}
.wrapper:hover input,
.wrapper:focus input,
.wrapper:focus-within input {
border-bottom: 1px solid rgba( var( --mid-gray ) );
cursor: text;
width: 24rem;
z-index: 1;
}
.wrapper:hover svg,
.wrapper:focus svg,
.wrapper:focus-within svg {
left: 22rem;
}
.icon.search {
fill: rgba(var(--mid-gray));
height: 2.25rem;
width: 2.25rem;
}
<header>
<div class="top">
<div class="d-flex justify-content-between">
<div class="wrapper">
<input placeholder="search" type="text" />
<svg class="icon search button">
<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"/>
</svg>
</div>
</div>
</div>
</header>
There's some misalignment on the icon but, for some reason, it's just here
Worked nicely but it was too blunt. So I've added a transition transition: all .5s; and it worked perfectly... on the opening. When the text field gets hidden, the grey line goes first, then the placeholder text and finally the SVG icon.
Also, after I've added the transition, on page load the text box flickers for a moment. After a few tests I've found out the culprit is the all defined in the transition tule that's, as expected, is also affecting the background-color required to make the text field transparent.
How could I make it smoother, showing/hiding everything at the same time without this flickering?
if you also add a transition on SVG and its left coordonates, does it look better to you ?
Also, transition can be set only on a single or more properties alike :
transition: width .5s, z-index 0.5s; to occur only on width and z-index.
#import URL( 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css' );
:root {
--darker-gray: 22, 22, 22; /** #191919 */
--mid-gray: 89, 89, 89; /** #595959 */
}
header .top {
background-color: rgba( var( --darker-gray ) );
-webkit-box-shadow: 0 3px 5px -2px #0D0D0D;
box-shadow: 0 3px 5px -2px #0D0D0D;
color: rgba( var( --light-text ) );
padding: 2.5rem;
position: fixed;
top: 0;
width: 100%;
}
.wrapper input {
background: transparent;
border: none;
color: rgba( var( --mid-gray ) );
cursor: pointer;
display: inline-block;
font-size: 2rem;
height: 3.75rem;
left: 2.5rem;
outline: none;
position: absolute;
top: 0;
transition: width .5s, z-index 0.5s;
width: 0;
z-index: 3;
}
.wrapper svg {
cursor: pointer;
margin-top: -1.5rem;
position: relative;
top: -1px;
left:0;
transition:left .5s;
}
.wrapper:hover input,
.wrapper:focus input,
.wrapper:focus-within input {
border-bottom: 1px solid rgba( var( --mid-gray ) );
cursor: text;
width: 24rem;
z-index: 1;
}
.wrapper:hover svg,
.wrapper:focus svg,
.wrapper:focus-within svg {
left: 22rem;
}
.icon.search {
fill: rgba(var(--mid-gray));
height: 2.25rem;
width: 2.25rem;
}
<header>
<div class="top">
<div class="d-flex justify-content-between">
<div class="wrapper">
<input placeholder="search" type="text" />
<svg class="icon search button">
<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"/>
</svg>
</div>
</div>
</div>
</header>
I have a circle that has dotted borders. However, instead of dots the border should be more like vertical dashes.
Is there a way to make the border exactly the same as the design (the vertical dashes one not the thick solid line) with css?
I want to change this class: "OtherCaptionBorder"
My css:
.caption_circle{
position: absolute;
top: 450px;
left: 7%;
z-index: 10;
padding-top: 35px;
padding-bottom: 20px;
color: #fff;
text-align: center;
height: 245px;
width: 245px;
background-color: #373737;
opacity: 0.83;
border-radius: 50%;
display: inline-block;
border-color: #fff;
border-style: solid;
border-width: 7px;
font-family: open_sansregular;
font-weight: 600;
}
.OtherCaptionBorder{
position: absolute;
top: 2px;
left: 1%;
z-index: 10;
padding-top: 35px;
padding-bottom: 20px;
color: #fff;
text-align: center;
border-radius: 50%;
display: inline-block;
height: 228px;
width: 228px;
border-radius: 50%;
border: 2px dotted #ffffff;
}
.InnerCircleText{
margin-top: 8px;
font-size: 18px;
font-family: open_sansregular;
font-size: 24.3px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.11;
letter-spacing: 0.8px;
text-align: center;
color: #ffffff;
}
Here is my HTML :
<div class="caption_circle">
<div class="OtherCaptionBorder">
<p class="InnerCircleText">
DOCTOR-<br>
RECOMMENDED<br>
FOR IBS, IBD,<br>
CELIAC<br>
& SIBO<br>
<hr class="HRHomepage">
</p>
</div>
</div>
Here is how I want my circle to look like:
You might be able to achieve something close to what you want with CSS alone, but as you can't control the length of (nor the space between) the dashes in the border style, you will most likely get an unsatisfactory result at the start/end of the circle where the borders meet.
body {
background: #ccc;
}
.outer {
background-color: rgba(0,0,0,0.5);
width: 300px;
height: 300px;
border-radius: 50%;
box-sizing: border-box;
border: 5px solid white;
}
.inner {
width: 100%;
height: 100%;
border: 5px dashed white;
border-radius: 50%;
box-sizing: border-box;
}
<div class="outer">
<div class="inner"></div>
</div>
But if you can use SVG you have control over stroke-dasharray
.img-bg {
background-image: url(https://picsum.photos/900/500);
background-size: cover;
}
.outer-circle {
position: relative;
background: transparent;
width: 20em;
height: 20em;
border-radius: 50%;
box-sizing: border-box;
border: 1em solid white;
overflow: hidden;
}
.custom-circle {
stroke-width: 10;
stroke: white;
stroke-linecap: butt;
fill: rgba(0, 0, 0, 0.5);
stroke-dasharray: 1 2.14; /* See below for an explanation */
}
.text {
margin: 0 auto;
padding: 0 1.5em;
color: white;
text-align: center;
position: absolute;
top: 50%;
font-size: 2em;
transform: translateY(-50%);
}
hr {
width: 60%
}
<section class="img-bg">
<div class="outer-circle">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="custom-circle" cx="50" cy="50" r="50" />
</svg>
<div class="text">Vestibulum pellentesque ac arcu eget.<hr/></div>
</div>
</section>
Calculating the stroke-dasharray values:
Why the magic number 2.14? According to Robert's answer on another question:
The circumference of the circle / sum of the stroke-dasharray values needs to be an integer if you want evenly spaced lines...
We know that our circle has a radius of 50 (<circle ... r="50" />). So with a little maths (you can use google for this):
C=2πr=2·π·50≈314.15927
we calculate that our circumference is 314.15927
Say we want 100 dashes, from there C/100 ≈ 3.14. This gives us the dash-array: 1 2.14.
I would like to accomplish the following graphic style with CSS:
I've been able to successfully replicate (approach) every single aspect of the intended design, except for the half-circle cutouts.
The closest I've been able to get is masking out the parts of the node body by setting a background-color for the cutout circles matching that of the backdrop, as well as inset shadows and border on the corresponding side.
After that, I added an extension towards the opposite direction, so that any shadow cast by the node is also effectively masked out. These are the results:
body {
font-family: "Segoe UI";
background-color: #eaeaea;
}
/* --- cutout --- */
.node-cutout-left {
position: absolute;
background-color: #eaeaea;
left: -1px;
width: 18px;
height: 36px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: 1px solid rgba(122, 167, 200, 0.7);
border-left: none;
box-shadow: -1px 1px 1px rgba(0,0,0,0.05) inset;
}
.node-cutout-left::after {
content: '';
display: block;
position: absolute;
left: -18px;
top: 0px;
height: 36px;
width: 18px;
background-color: #eaeaea;
}
/* --- end of cutout --- */
.node {
cursor: move;
position: absolute;
top: 12px;
left: 20px;
width: 160px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
border: 1px solid rgba(122, 167, 200, 0.7);
}
.node-header {
min-height: 20px;
padding: 6px 12px;
background-color: #489ddb;
color: #fff;
font-size: 12pt;
font-weight: 100;
box-shadow: 0px 0px 0px 1px #489ddb; /* overlay node-border */
}
.node-body {
position: relative;
min-height: 100px;
padding: 12px 24px;
background: #ffffff;
background: linear-gradient(170deg, #ffffff 0%,#e5e5e5 100%);
border: 1px solid rgba(255,255,255,0.5);
}
<div class="node" draggable="true" ondragstart="console.log(event);">
<div class="node-header">
<div class="node-title">Gain</div>
</div>
<div class="node-body">
<div class="node-cutout-left" style="top:20px;"></div>
<div class="node-cutout-left" style="top:70px;"></div>
</div>
</div>
However, I need transparent background in the masked out area. How could I accomplish this?
I've also prepared a JSFiddle (illustrating the problem) for those who'd wish to join this brainstorm, and whose help I would appreciate beyond measure.
Questions already on SO failed to solve my issue so far, as they use either the box-shadow of the element used as the cutout to fill the rendered area of the clipped element (which would cancel out the gradient background in my case)...
... or SVG clips, for which I -- for the life of it -- can't find a working example when applied to HTML elements with bordered style.
Ok, here you are. Probably it can be achieved in less code, but it's a start.
Only the gradient is a small issue..
body {
font-family: "Segoe UI";
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.node {
cursor: move;
position: absolute;
top: 40px;
left: 60px;
width: 180px;
}
.node-header {
min-height: 20px;
padding: 6px 12px;
background-color: #489ddb;
color: #fff;
font-size: 12pt;
font-weight: 100;
}
.node-body {
position: relative;
min-height: 100px;
padding-left: 19px;
}
.node-content {
padding: 12px 24px;
background: #fff;
background: linear-gradient(170deg, #ffffff 0%, #e5e5e5 100%);
width: 100%;
border: 1px solid rgba(122, 167, 200, 0.7);
border-left: none;
border-top: none;
min-height: 145px;
}
.node-cutout {
overflow: hidden;
width: 19px;
position: absolute;
left: 0;
top: 0;
height:200px;
}
.node-square {
position: absolute;
border-left: 1px solid rgba(122, 167, 200, 0.7);
border-bottom: 1px solid rgba(122, 167, 200, 0.7);
width: 19px;
height: 18px;
z-index: 1;
background-color:#eaeaea;
}
.round {
padding: 18px;
position: relative;
overflow: hidden;
display: block;
width: 0px;
}
.round:before {
content: '';
position: absolute;
width: 35px;
height: 35px;
border: 1px solid rgba(122, 167, 200, 0.7);
border-radius: 100%;
box-shadow: 0 0 0 200px #eaeaea;
z-index: 1
}
.round:after {
background-color: rgba(122, 167, 200, 0.7);
content: '';
position: absolute;
left: 0;
width:1px;
z-index: 1;
height: 18px;
display: inline-block;
}
.round.top:after {
margin-top: -18px;
}
.round.top:before {
left: -18px;
}
.round.bottom:before {
left: -18px;
top: -18px;
}
<div class="node" draggable="true" ondragstart="console.log(event);">
<div class="node-header">
<div class="node-title">Gain</div>
</div>
<div class="node-body">
<div class="node-content">
</div>
<div class="node-cutout">
<div class="node-cutout-left" style="">
<span class="round top"></span>
<span class="round bottom"></span>
</div>
<div class="node-cutout-left" style="margin-top:-17px;">
<span class="round top"></span>
<span class="round bottom"></span>
</div>
<div class="node-square">
</div>
</div>
</div>
</div>
Please try this:
<div class="node" draggable="true" ondragstart="console.log(event);">
<div class="node-header">
<div class="node-title">Gain</div>
</div>
<div class="node-body">
<i class="fa fa-volume-up fa_custom"></i>
<div class="node-cutout-left" style="top:20px;"></div>
<div class="node-cutout-left" style="top:70px;"></div>
</div>
</div>
CSS:
body {
font-family: "Segoe UI";
}
.fa_custom{position: absolute;
left: -11px;
z-index: 1000000;
color: #fff;
top: 32px;}
.node {
cursor: move;
position: absolute;
top: 40px;
left: 60px;
width: 180px;
border: 1px solid rgba(122, 167, 200, 0.7);
box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
}
.node-header {
min-height: 20px;
padding: 6px 12px;
background-color: #489ddb;
color: #fff;
font-size: 12pt;
font-weight: 100;
}
.node-body {
position: relative;
min-height: 100px;
padding: 12px 24px;
background: #ffffff;
}
.node-cutout-left {
position: absolute;
background-color: #eaeaea;
left: -1px;
width: 18px;
height: 36px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: 1px solid rgba(122, 167, 200, 0.7);
border-left: none;
box-shadow: -1px 1px 1px rgba(0,0,0,0.05) inset;
}
.node-cutout-left::after {
content: '';
display: block;
position: absolute;
left: -19px;
top: 3px;
height: 30px;
width: 33px;
border-radius: 64%;
background-color: #489DDB;
}
JSFiddle Link: https://jsfiddle.net/jdqht5ch/
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 6 years ago.
Hi all, I want to create a <button> like the one you can see in the above image, with background: transparent; border: 1px solid #999. I have checked a previous similar question with the same problem, but since it's 3 years old I would to check if there are better solutions.
Do you have an idea on how to achieve this result? Thanks in advance for your replies!
You could do something like this with :before and :after pseudo elements
body {
background: white;
}
button {
padding: 20px 45px;
border: 1px solid #999999;
display: inline-block;
position: relative;
background: white;
color: #999999;
}
button:before, button:after {
height: 25px;
width: 25px;
background: white;
position: absolute;
content: '';
}
button:before {
top: 0;
left: 0;
border-right: 1px solid #999999;
transform: rotate(49deg) translate(-71%);
}
button:after {
bottom: 0;
right: 0;
border-left: 1px solid #999999;
transform: rotate(49deg) translate(71%);
}
<button>CLICK ME</button>
Or you can use SVG
button {
display: inline-block;
background: transparent;
border: none;
}
polygon {
stroke: #999999;
fill: transparent;
stroke-width: 1px;
transition: all 0.3s ease-in;
}
text {
fill: #999999;
font-size: 20px;
transition: all 0.3s ease-in;
}
button:hover polygon {
fill: black;
}
button:hover text {
fill: white;
}
<button>
<svg width="200px" height="100px">
<polygon points="165.083,84.769 15.971,84.769 15.971,28.227 33.742,11.263 185.114,11.263 185.114,66.837 "/>
<text x="100" text-anchor="middle" y="55">CLICK ME</text>
</svg>
</button>
Here's a JS fiddle with a little trick I use with :before and :after.
See this fiddle
button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative; }
button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff}
button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff}
You can replace background of :before and :after with yours to fit it correctly.
you should not use transparent background you should use url property like this
.selector{
background: url(imageAddress);
}
I'm trying to create a double bordered tool tip with a triangle but I can't figure out how to do the outline part because there is no outline-right/left/top/bottom.
Here is what I have so far
body {
background-color: rgb(83, 110, 218);
}
.trigger {
margin-top: 150px;
position: relative;
width: 30px;
height: 30px;
background-color: #000;
}
.tooltip {
/* Misc */
text-align: center;
padding-top: 20px;
background-color: white;
position: absolute;
width: 300px;
height: 50px;
left: 70px;
top: -25px;
outline-color: white;
outline-width: 3px;
outline-style: solid;
border-color: rgb(83, 110, 218);
border-width: 3px;
border-style: solid;
}
.tooltip:after,
.tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: white;
border-width: 20px;
margin-top: -20px;
}
.tooltip:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: rgb(83, 110, 218);
border-width: 26px;
margin-top: -26px;
}
<div class="trigger">
<div class="tooltip">
Hello World
</div>
</div>
Or go here: Fiddle
Does anybody know how to accomplish this?
For a pure CSS alternate, you can use the below snippet. It basically uses a double for the border-style of the main rectangle (instead of outline) and a pseudo-element which is rotated by 45 degrees to produce the triangle. The triangle has a border which is the same color as the inner border of the main rectangle (or the body) and a box-shadow which is white in color to produce the double border effect. The pseudo-element is positioned appropriately to make it look as though it is a continuation of the border of the main rectangle.
Note: To modify the thickness of the border, the border-width of parent, border-width of the pseudo-element, the box-shadow on the pseudo-element and the positioning of the pseudo-element should be modified accordingly.
body {
background-color: rgb(83, 110, 218);
}
.trigger {
margin-top: 150px;
position: relative;
width: 30px;
height: 30px;
background-color: #000;
}
.tooltip {
/* Misc */
text-align: center;
padding-top: 20px;
background-color: white;
position: absolute;
width: 300px;
height: 50px;
left: 70px;
top: -25px;
border-color: rgb(83, 110, 218);
border-width: 6px;
border-style: double;
}
.tooltip:before {
left: -11.75px;
top: 35%;
height: 20px;
width: 20px;
border: 2.5px solid rgb(83, 110, 218);
box-shadow: -2px 2px 0px 0px white;
border-right: none;
border-top: none;
content: " ";
background: white;
position: absolute;
pointer-events: none;
transform: rotate(45deg);
}
<div class="trigger">
<div class="tooltip">
Hello World
</div>
</div>
I'd suggest you to use svg.
body {
background: rgb(83, 110, 218)
}
<svg width="300" height="60" viewBox="0 0 300 60">
<path d="M20 5h270v50h-270v-12.5l-10 -12.5l10 -12.5z" fill="white" />
<path d="M16 1h278v58h-278v-15l-11 -14 l11,-14z" fill="none" stroke-width="2.5" stroke="white" />
<text x="150" y="35" text-anchor="middle">Hello World</text>
</svg>