Image with full description when hovering over an organization chart

Question

I want to hover my mouse over an organization chart box and have the image with full description. However, the image do not pop out and the description also in the straight line with the name. Any thoughts? Thank you.

This is my coding. I try to make it like this website EXAMPLE OF THE WEBSITE. Is it possible to do it?

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: ;
  background-color: #f1f1f1;
  -webkit-font-smoothing: antialiased;
}

.box-row {
  text-align: center;
}

.box {
  border: 4px solid #000000;
  height: 80px;
  width: 286px;
  display: inline-block;
  top: 46px;
}

.box:hover {
  box-shadow: 8px 8px 9px -4px rgba(0, 0, 0, 0.1);
  width: 296px;
  top: 36px;
}

.bar {
  width: 30px;
  transform: rotate(90deg);
  margin: 13px auto 13px auto;
  border: 2px solid #000000;
}

.bar2 {
  width: 84px;
  transform: rotate(90deg);
  margin: 39px auto -6px auto;
  border: 2px solid #000000;
}

.horizontal-bar {
  display: inline-block;
  width: 35px;
  margin-bottom: 20px;
  margin-left: -6px;
  margin-right: -5px;
  border: 2px solid #000000;
}

.box-group {
  display: inline-block;
  width: 48%;
}

.second {
  margin: 8px 10px;
}

.second-separator {
  width: 629px;
  margin-bottom: 55px;
  margin-right: 344px;
  border: 2px solid #000000;
}

.vertical-bar {
  width: 176px;
  margin-bottom: -55px;
  margin-top: 27px;
  transform: rotate(90deg);
  border: 2px solid #000000;
}


/* setup tooltips */

.tooltip {
  position: relative;
}

.tooltip:before,
.tooltip:after {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.tooltip:after {
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, .75);
  border-left: 6px solid transparent;
  content: '';
  height: 0;
  top: 20px;
  left: 20px;
  width: 0;
}

.tooltip:before {
  background: rgba(0, 0, 0, .75);
  border-radius: 2px;
  color: black;
  content: attr(data-title);
  font-size: 14px;
  padding: 6px 10px;
  top: px;
  white-space: nowrap;
  height: 300px;
  width: 300px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}


/* expand */

.tooltip.expand:before {
  transform: scale3d(.2, .2, 1);
  transition: all .2s ease-in-out;
}

.tooltip.expand:after {
  transform: translate3d(0, 6px, 0);
  transition: all .1s ease-in-out;
}

.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

.tooltip.expand:hover:after {
  transition: all .2s .1s ease-in-out;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">

  <link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'>

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</head>

<body>



  <div class="row">
    <div class="column" style="background-color:#;">

      <h2>STRUCTURE</h2>

      <br>
      <br>
      <br>
      <div class="box-row">
        <div>
          <div class="box">
            <div class="tooltip expand" data-title="Aiman Iskandar - Monitor all the operation in the CTS Division">
              <p>Vice President</p>
              <p>Business Technology</p>
              <p>aiman iskandar</p>
            </div>
            <hr class="bar" />
          </div>
          <div>
            <div class="box">
              <p>Head</p>
              <p> Consulting & Technology Services</p>
              <p>aidil iman</p>
            </div>
            <hr class="bar2" />
          </div>

          <br />
          <br />



        </div>
      </div>
    </div>


    <br>


</body>

</html>

Maybe make a JavaScript modal. – Jack Bashford Sep 04 '18 at 01:26 — Jack Bashford, Sep 04 '18 at 01:26

score 0 · Answer 1 · answered Sep 04 '18 at 02:13

What you can do is make a JavaScript modal, and I'll use a modified trick from this tutorial:

1: Make a modal box - that is, make a <div> element with the content and positioning and whatever you want.

2: Make a JavaScript <script> element, and inside it place this code:

document.getElementById("nameBox").onmouseover = showModal;
document.getElementById("nameBox").onmouseout = hideModal;

function showModal() {
    document.getElementById("modalBox").style.display = block;
}

function hideModal() {
    document.getElementById("modalBox").style.display = none;
}

You're good to go!

Thanks for helping @JBDouble05 but i have a problem to make the modal box pop out..I try using the link that you give me and try run it using the javascript that you give but still nothing happen. Maybe I misplace the coding. This is the link https://www.w3schools.com/code/tryit.asp?filename=FUXDEUQVB2XA — Wan1234, Sep 04 '18 at 03:59

Image with full description when hovering over an organization chart

1 Answers1