How to give shadow to a pointer of Tooltip> In HTML

tooltip box-shadow
triangle shadow
css after shadow
tooltip arrow css
tooltip examples
shape shadow css
filter: drop-shadow
tooltip arrow with border

I know I can absolute position the pointer of the Tooltip but how can I add the blur effect to the pointer? Because if I put blur effect to it, the blur will not only be shown on the bottom triangle of pointer, but also on the upper half of it.

You can try drop-shadow filter css effect.

.pointer {
  width: 200px;
  padding: 10px;
  position: relative;
  filter: drop-shadow(0px 0px 10px #b2b2b2);
  background: #fff;

.pointer:after {
  content: "";
  position: absolute;
  border: 20px solid;
  border-color: #fff transparent transparent;
  bottom: -40px;
  left: calc(50% - 20px);
<div class="pointer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis interdum cursus.</div>

Create tooltips with CSS and HTML box shadow – CSS3 border , With tooltips, the pointers are often generated using the border trick. because of the shadow and when using the technique you might have to pay attention to  Position the arrow inside the tooltip: top: 100% will place the arrow at the bottom of the tooltip. left: 50% will center the arrow. Note: The border-width property specifies the size of the arrow.

You can use this code

body {
            margin: 0;
            padding: 0;
        .example {
            background: rgba(219,224,223,0.5);
            margin-bottom: 20px;
            padding: 20px;
            text-align: center;
            width: auto;
        .example-with-box-shadow {
            box-shadow: rgba(0,0,0,0.3) 0 2px 10px;
        .example-with-arrow, .example-with-box-shadow, .example-with-drop-shadow {
            background: white;
            display: inline-block;
            margin-bottom: 5px;
            padding: 5px;
            position: relative;
            width: 200px;
        .example-with-arrow::after, .example-with-box-shadow::after, .example-with-drop-shadow::after {
            border: 10px solid;
            border-top-color: currentcolor;
            border-right-color: currentcolor;
            border-bottom-color: currentcolor;
            border-left-color: currentcolor;
            border-color: white transparent transparent;
            content: "";
            left: 50%;
            margin-left: -10px;
            position: absolute;
            top: 100%;
    <div class="example">
        <div class="example-with-box-shadow">Tooltip with box-shadow</div>

Tooltip-Arrow with drop shadow, Tooltip that has a drop shadow for both, the tooltip plus the arrow. Color of overlay shadow when tooltip is open. Type 'rgba(250, 250, 250, 0.70)' pointerColor. Color of tooltip pointer, it defaults to the backgroundColor if none

body {
  background-color: #888;

.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #bada55;
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    bottom: -2em;
    left: 50%;
    box-sizing: border-box;
    border: 1em solid black;
    border-color: transparent transparent #bada55 #bada55;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>

Beautiful Tooltips with Drop-shadows ··· Nico Hagenburger, Make your tooltips more beautiful with drop-shadows instead of box-shadows and get them look good on Retina displays. A tooltip appears to explain what the element is or what it does. For example when we hover over a link the pointer cursor reinforces that clicking the link with do some action. This link might also have a tooltip, but the cursor depends on the click action.

Android tooltip with shadow, Specify whether to show a shadow or not with ToolTip. hovers the pointer to over an item, a tooltip box will appear — you can add text, image, video, radio,  The rest of the CSS code is just to control the tooltip's appearance and includes the usual run-of-the-mill colour ("color" in US English), padding, border and width properties. In fact, since the design of the tooltip box is now controlled by you, you can also give it rounded corners, a shadow and other effects, if you choose.

tooltip.shadow, A CSS class name to apply to the tooltip's container div, allowing unique CSS If followPointer is false in for example a column series, the tooltip will show  If you want to change or enable the beautiful and subtle Mouse pointer shadow please open the Mouse Properties in Windows 10. The fastest Way is via the windows-10 Run Dialog Windows-Log+R keyboard shortcut and the command: main.cpl. Please select the Tab Pointers and Enable pointer shadow ( see Image-1)

Triangle With Shadow, You probably already know you can make triangles with CSS. But what if you want to put a shadow behind it? Unfortunately the classic border trick doesn't. I noticed that the tooltip did not work for IE8 (which I saw your fix in the comments). Also for IE9 I noticed that the tooltip is not consistent, meaning that the tooltip shows in one link but not others. Have you noticed this behavior. For Safari, Google Chrome and Mozilla (all latest versions), the tooltip works great. Thanks.

  • Please could you include an explanation of why this answers the question?