5

I have bubble-like pop-up which displays on hover. I need to add a border around the bubble, but the problem is that I'm unable to add a border to the pointer of the bubble.

The arrow is made by the .bubble:after

You can view the fiddle here http://jsfiddle.net/livewirerules/c2Lh6zv6/1/

Below is the css

.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border:solid 1px red;
  text-align:center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}

Any help will be appreciated

Improve this question
1

4 Answers 4

Reset to default
9

Try adding a :before element that creates the same arrow as your :after but make it a little bit larger, and red. make sure the :before is behind your :after and it should give the same affect as having a border on your :after arrow.

.bubble::before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 16px 16px;
  border-color: red transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -16px;
  top: -16px;
  left: 50%;
}

edit: linked to correct jsfiddle

revised fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You will need a new element to simulate the "border" of the pointer, since the pointer is already using borders to create the triangle effect.

You can simple use the :before pseudo class to create a red pointer that will be placed under the white pointer.

/* Styles specific to this particular page */
#container2 {
    background: #eeeef4 none repeat scroll 0 0;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px;
    width: 250px;
}
.scroll-pane
{
	width: 50%;
	height: 200px;
	overflow: auto;
}
.horizontal-only
{
	height: auto;
	max-height: 200px;
}

.image {
  position: relative;
}
.image:hover .bubble {
  display: block;
}
.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border:solid 1px red;
  text-align:center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FF0000 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -16px;
left: 50%;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}

td {
    width: 150px;
}
<div id="container">
<div class="scroll-pane horizontal-only">
				
        <table id="bu">
<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Input</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Test</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>
</table>
			</div>
      
      </div>

Check the example in the update fiddle.

Improve this answer

Comments

1

You could do this and stop worrying about all this "add a border to the pseudo-element", when your whole pseudo-element is actually a border.

body {
  margin: 0;
}
.bubble {
  margin-top: 14.85px;  /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
  /* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
  width: 80px;
  height: 80px;
  background-color: white; /* Change container background */
  border: 1px solid red; /* Change container border */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}
<div class="bubble">
  <span>Test Test Test Test</span>
</div>

If the border-width is consistant between your elements, you just need to change these lines of code:

background-color: <background-color>; /* Change container background */
border: 1px solid <border-color>; /* Change container border */


body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bubble {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 14.85px;  /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
  /* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
  width: 80px;
  height: 80px;
  background-color: chartreuse; /* Change container background */
  border: 1px solid dodgerblue; /* Change container border */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}

.bubble:nth-of-type(2) {
  background-color: gold;
  border: 1px solid purple
}

.bubble:nth-of-type(3) {
  background-color: dodgerblue;
  border: 1px solid cyan
}

.bubble:nth-of-type(4) {
  background-color: tomato;
  border: 1px solid firebrick;
}
<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

Applied to your specific demo:

/* Styles specific to this particular page */

#container2 {
  background: #eeeef4 none repeat scroll 0 0;
  border-radius: 5px;
  margin: 20px auto;
  padding: 20px;
  width: 250px;
}

.scroll-pane {
  width: 50%;
  height: 200px;
  overflow: auto;
}

.horizontal-only {
  height: auto;
  max-height: 200px;
}

.image {
  position: relative;
}

.image:hover .bubble {
  display: block;
}

.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border: solid 1px red;
  text-align: center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.bubble::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-15px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}

td {
  width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link href="http://jscrollpane.kelvinluck.com/style/demo.css" rel="stylesheet"/>
<link href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id="container">
  <div class="scroll-pane horizontal-only">
    <table id="bu">
      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Input</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Test</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>
    </table>
  </div>

</div>

jsFiddle

Improve this answer

Comments

0 

body {
  margin: 0;
}
.bubble {
  margin-top: 14.85px;  /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
  /* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
  width: 80px;
  height: 80px;
  background-color: white; /* Change container background */
  border: 1px solid red; /* Change container border */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}
<div class="bubble">
  <span>Test Test Test Test</span>
</div>

Improve this answer

1 Comment

Hi and welcome to the StackOverFlow, Please provide more details about your answer, Check this link please: stackoverflow.com/help/how-to-answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.