Tooltip with a Triangle

Tooltip with a triangle

You can do it with CSS, by using the css triangle trick

a.tip span:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right:8px solid black;
    left:-8px;

    top:7px;
}

Demo at http://jsfiddle.net/dAutM/7/

live snippet

a.tip {

  position: relative;

}

a.tip span {

  display: none;

  position: absolute;

  top: -5px;

  left: 60px;

  width: 125px;

  padding: 5px;

  z-index: 100;

  background: #000;

  color: #fff;

  -moz-border-radius: 5px;

  /* this works only in camino/firefox */

  -webkit-border-radius: 5px;

  /* this is just for Safari */

}

a.tip span:before {

  content: '';

  display: block;

  width: 0;

  height: 0;

  position: absolute;

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;

  border-right: 8px solid black;

  left: -8px;

  top: 7px;

}

a:hover.tip {

  font-size: 99%;

  /* this is just for IE */

}

a:hover.tip span {

  display: block;

}

<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>

Tooltip with a triangle arrow with dashed border

you were nearly there.

css update:

.new-field-popup:after{
/* change your border rule to just bottom and right */
    border-bottom: 1px dashed rgb(177, 177, 177);
     border-right: 1px dashed rgb(177, 177, 177);
/* add a background colour to hide the bit of other border */
     background-color:white;
}

https://jsfiddle.net/odt1xa9L/2/

How to create triangle and use it as a arrow in tooltip

You can simplify a little like below:

body {
  background: #de302f;
}

.container {
  --t: 2px; /* thickness */
  --b: var(--t) solid #fff; /* border here */
  
  position: relative;
  max-width: 600px;
  height: 50px;
  border: var(--b);
  border-bottom: none;
  margin: 10px auto;
  padding: 30px;
  box-sizing: border-box;
  clip-path: inset(0 0 -100vmax);
}
.container:before,
.container:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 40px; /* control the height here */
  right: calc(-1*var(--t));
  border-right: var(--b);
}
.container:after {
  width: 100%;
  border-top: var(--b);
  transform: skewX(30deg); /* control the angle here */
  transform-origin: 0 calc(100% - var(--t));
}

<div class="container">

</div>

Pure CSS Tooltip with arrow

Like this?

span {

  padding: 10px;

  display: inline;

}

[title] {

  position: relative;

}

[title]:hover:before {

  background: #333;

  top: 100%;

  background: rgba(0, 0, 0, .8);

  border-radius: 5px;

  color: #fff;

  content: attr(title);

  padding: 5px 15px;

  position: absolute;

  z-index: 98;

  width: auto;

  margin-top: 10px;

}

[title]:hover:after {

  width: 0;

  height: 0;

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;

  border-bottom: 10px solid #333;

  content: ' ';

  position: absolute;

  top: 100%;

  left: 50%;

}

<span class="dijitButtonContents" id="saveButton" title="Save as draft"><span id="saveButton_label">Save</span></span>

CSS Triangle on materialui tooltip's right side

Rather than use borders you could use clip-path. This lets you define a polygon in % terms so it will automatically adjust to the div's dimensions.

Here is a simple snippet to give the idea, the background is added through a before pseudo element which extends to the right beyond the width of the div which holds the actual text.

div {
  width: 200px;
  height: auto;
  min-height: 50px;
  padding: 10px;
  position: relative;
}
div::before {
  content: '';
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5%;
  background-color: gray;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
  z-index: -1;  
}

 <div>Some text here</div>
 <div>Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here</div>

CSS tooltip with arrow and border

One of the solutions would be adding another pseudo element :before which is slightly smaller than :after. It's not the nicest solution ever, but it works perfectly fine for particular cases.

(You may notice that I've also cleaned up your code a little and replaced :after with :before to have proper z-index for both pseudo elements. Let me know if you need further explanation)

.up-arrow {

    display: inline-block;

    position: relative;

    border: 1px solid #777777;

    text-decoration: none;

    border-radius: 2px;

    padding: 20px;

    margin-top: 50px;

}

.up-arrow:before {

    content: '';

    display: block;  

    position: absolute;

    left: 140px;

    bottom: 100%;

    width: 0;

    height: 0;

    border: 10px solid transparent;

    border-bottom-color: black;

}

.up-arrow:after {

    content: '';

    display: block;  

    position: absolute;

    left: 141px;

    bottom: 100%;

    width: 0;

    height: 0;

    border: 9px solid transparent;

    border-bottom-color: white;

}

<div href="#" class="up-arrow">Button with Up Arrow</div>

How to apply tool tip arrow triangle shadow

Try breaking it down into two elements (the arrow and the text box) with a wrapper around them so you can position the whole thing more easily. Then play around with the positions of the shadow until it looks good and you do not get a weird overlap.

In my example I used an SVG to create the arrow. And I gave it a z-index of 999 and the text box a z-index of -999 so the arrow will be on top of the text box and you will only have to play around with the position of its shadow, trying to match the text box shadow and making sure it doesn't overlap the text box on the right side.

body {
    background: FloralWhite;
}

.text-container {
    margin: 3em;
}

.test-shadow {
    float: left;
    z-index: -999;
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.1);
    width: 80%;
    padding: 40px;
    position: relative;
    box-sizing: border-box;
    background: white;
}

.svg-arrow {
    float: left;
    z-index: 999;
    margin-top: 20px;
    height: 30px;
    -webkit-filter: drop-shadow( -7px 4px 4px rgba(0, 0, 0, 0.07));
            filter: drop-shadow( -7px 4px 4px rgba(0, 0, 0, 0.07));
}

.svg-arrow polygon{
    fill: white;
}

<div class="text-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-arrow" viewBox="0 0 20 20">
        <polygon points="0,0 20,0 20,20"></polygon>
    </svg>
    <div class="test-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tristique felis, vitae pretium sem.</div>
</div>