Adding a border around a CSS triangle?

[toolman]

Hi there,

I have the following Fiddle in which I am trying to add a border around the triangles on the tooltips. I thought I could do it with a box shadow, but can’t seem to work it out. Basically I would like to have the black border continue over the point of the triangle, but not under it if that makes sense?

Edit fiddle - JSFiddle - Code Playground

Any ideas how I can do this?

This is the gust of what I am trying to achieve:

Many thanks

[PaulOB]

I’m just on my way out but I usually do the arrow like this:

I use a square rotated 45 degrees to get the arrow effect and then cut it off with clip. You need a background color to cover the original line so you need to match contexts etc.

It would take a little while to implement that into your code as you have many variations in there but it would work.

[snadyleiby]

here is an example similar to @PaulOB’s, but with a little animation…

https://codepen.io/Snady_Leiby/full/MWPMNLr…

HTML

 <a href="https://www.example.com">hoverroo
  <span>
   View 5 day forecast
  </span>
 </a>

CSS

body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5  sans-serif;
 }
a {
   position: relative;
   display: inline-block;
   margin: 1em 2em;
   color: #069;
 }
a:hover, 
a:active {
   color: #069;
 }
a span {
   position: absolute;
   display: block;
   left: -99em;
   width: 12em;
   padding: 1em 0;
   margin-top: calc( 0.7em - 2px );
   border: 1px solid #000;
   border-radius: 0.5em;
   background-color: #fff;
   text-align: center;
   transition: 1s ease-in-out;
 }
a span::before {
   position: absolute; 
   width: 1em;
   height: 1em;
   top: calc( -0.7em + 2px );
   left: 1em;
   transform: rotate( -45deg );
   border-top: 1px solid #000;
   border-right: 1px solid #000;
   background-color: #fff;
   content: '';
 }
a:hover span,
a:active span {
   left: 0;
 }

[toolman]

Many thanks! I have played around with both and have modified @snadyleiby 's version to create others in all directions.

Thanks again everyone.

[toolman]

I jumped the gun a bit!

I am trying to create a version that will slide in from the top, right, bottom and left.

For example these, for example sliding in from the top I can’t work out.

This is the updated fiddle:

Edit fiddle - JSFiddle - Code Playground

I’ve tried this:

@mixin tooltip-white{ top: -90em;

and also
@mixin tooltip-white{ bottom: -90em;

But there doesn’t seem to be anything appearing after hovering.

Any ideas how I do this?

Thanks

[PaulOB]

It’s amazing how much harder using SCSS makes something as simple as this become

If you want to slide from the top then you need to reset the left and change the top positions instead. This should do it.

.tt-item{
   position: relative; 
   display: inline-block;
 }



@mixin tooltip-white{
  position: absolute;
   display: block;
   left: 0;
   width: 200px;
   padding: 1em 0;
   margin-top: -90em;
   border-radius: 8px;
   background-color: #fff;
   text-align: center;
   transition: 0.5s ease-in-out;
   border: 1px solid #000;
}

@mixin tooltip-white-arrow{
  position: absolute; 
   width: 1em;
   height: 1em;
   top: calc( -0.7em + 2px );
   left: 50%;
   transform: translateX(-50%) rotate( -45deg );
   border-top: 1px solid #000;
   border-right: 1px solid #000;
   background-color: #fff;
   content: '';
  
}

/* WHITE TOOLTIP ARROW TOP SLIDE IN LEFT  */
.tt-item span.tt-left-top-white-border {
   @include tooltip-white;
   
 }
.tt-item span.tt-left-top-white-border::before {
   @include tooltip-white-arrow;
 }
.tt-item:hover span.tt-left-top-white-border,
.tt-item:active span.tt-left-top-white-border {
   margin-top: calc( 0.7em - 2px );
 }

[ralphm]

@PaulOB

It’s amazing how much harder using SCSS makes something as simple as this

No, sorry, all of these complex overlays to the simple basics of web design make things easier! Don’t you get it?! And simplicity is just so … uncool, you know?

[snadyleiby]

@toolman

I am trying to create a version that will
slide in from the top, right, bottom and left.

Examples here…

Full page View
https://codepen.io/Snady_Leiby/full/YzJmvqK

Editor View
https://codepen.io/Snady_Leiby/pen/YzJmvqK

[wake689]

I like this for making tool tip arrows. It took me a while to work out how it worked.

CSS Tooltip

[toolman]

Hi @snadyleiby

Many thanks for the reply and the examples! They look great. However, I am wondering how I can have the tooltips kind of appear/fade in near the actual element rather than from the far side of the page?

https://codepen.io/Snady_Leiby/pen/YzJmvqK

Similar to this:
https://www.w3schools.com/css/css_tooltip.asp

I have tried to remove the -99em, but the tooltips then just appear rather than being hidden to start with.

Any ideas how I can do this?

[PaulOB]

@toolman

Any ideas how I can do this?

Why don’t you set them to the right position such as left:0 and then just transform them away 200%.

e.g.

a span{
  pointer-events:none;
  left:0;
  transform:translatey(200%);
  opacity:0;
}
a:hover span,
a:active span {
  transform:translateY(0%);
  opacity:1
 }

This is a fork of the pen by @snadyleiby.

Of course you’ll need to translate in all the directions you want to travel etc.

[toolman]

Many thanks @PaulOB

That works great. However I noticed one thing - if I move my mouse down slowly from the link into the tooltip, it disappears. I guess there is a pixel margin or two that is in between the link and the tooltip. Is there a way I can stop it from disappearing/hidden when hovering in that “empty” area? I have tried adding pointer-events: all, but this then makes it appear when hovering under the actual link.

Any ideas what I can do?

Thanks!

[PaulOB]

If you reset the pointer events to initial on hover it will work as per the original version except there is a gap between the tooltip and the link which is why it loses focus unless you are quick (which is happening in the original also).

You could shim a pseudo element above the tooltip to keep it active.
I’ve updated the codepen to show the effect.