Show a tooltip when clicking another element

Question

I have a tooltip that displays on click, however I want the tooltip to show once the user has clicked the div with the same ID. This is because I will have questions they can click, this will than display where they can do this on the page.

Im not sure if this is possible with tooltip, or if there is a better way to do this.

$("#tooltip1").on('click', function() {
  $("button #tooltip1").click();
});

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}


/* Hide the tooltip content by default */

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}


/* Position tooltip above the element */

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  width: 160px;
  content: attr(data-tooltip);
}


/* Triangle hack to make tooltip look like a speech bubble */

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  content: " ";
  font-size: 0;
  line-height: 0;
}


/* Show tooltip content on hover */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p><button id="tooltip1" data-tooltip="I’m the tooltip text.">I’m a button with a tooltip</button></p>
  <p><button id="tooltip2" data-tooltip="I’m the tooltip text.">I’m a button with a tooltip</button></p>
</div>

<div id="tooltip1">
  Show tooltip 1
</div>

<div id="tooltip2">
  Show tooltip 2
</div>

Answer 1

Firstly you have repeated the same id on the buttons and the divs which is invalid. I'd suggest leaving the id on the div, but using a common class on the buttons which you can hook an event handler to in jQuery, along with a data attribute to store the individual div to target.

Then you can hide/show the tooltips by toggling a class on them to change their visibility as well as using :hover, like this:

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip].show:before,
[data-tooltip].show:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Then you can use toggleClass() within the click handler:

$(".toggle-tip").on('click', function() {
  $('#' + $(this).data('id')).toggleClass('show');
});

$(".toggle-tip").on('click', function() {
  $('#' + $(this).data('id')).toggleClass('show');
});

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}


/* Hide the tooltip content by default */

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}


/* Position tooltip above the element */

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  width: 160px;
  content: attr(data-tooltip);
}


/* Triangle hack to make tooltip look like a speech bubble */

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  content: " ";
  font-size: 0;
  line-height: 0;
}


/* Show tooltip content on hover */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip].show:before,
[data-tooltip].show:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p><button id="tooltip1" data-tooltip="I’m the tooltip text.">I’m a button with a tooltip</button></p>
  <p><button id="tooltip2" data-tooltip="I’m the tooltip text.">I’m a button with a tooltip</button></p>
</div>

<div class="toggle-tip" data-id="tooltip1">
  Show tooltip 1
</div>

<div class="toggle-tip" data-id="tooltip2">
  Show tooltip 2
</div>

Answer 2

You have repeated the id for "tooltip1" first you have given the id to the button then to div. So, make sure your id don't get repeated in the page and give unique ids to the elements.