So I've had this question for a while, and I can't figure out how to make a tooltip toggle. In websites, there is sometimes a tutorial involving tooltips that explain the functionality of the website or how to use it. I have been trying to do this on my own website

<div title = "This is the tutorial!" data-toggle = "tooltip"></div>

So I made a tooltip, yet I can't figure out how to make it tooltip without hovering... Is there a specific attribute I could toggle on the div to make the tooltips appear without the user hovering over the div? Thanks! (Tooltips are built-in HTML ones. On my website I'm using the additional bootstrap template to make them look better.)

RECAP: What I'm trying to achieve is a tooltip that can show whenever a certain function is run and hide when another is run. I cannot figure this out, as all the examples on other websites require the user to hover or click a button or some other action.

So I've had this question for a while, and I can't figure out how to make a tooltip toggle. In websites, there is sometimes a tutorial involving tooltips that explain the functionality of the website or how to use it. I have been trying to do this on my own website

<div title = "This is the tutorial!" data-toggle = "tooltip"></div>

So I made a tooltip, yet I can't figure out how to make it tooltip without hovering... Is there a specific attribute I could toggle on the div to make the tooltips appear without the user hovering over the div? Thanks! (Tooltips are built-in HTML ones. On my website I'm using the additional bootstrap template to make them look better.)

RECAP: What I'm trying to achieve is a tooltip that can show whenever a certain function is run and hide when another is run. I cannot figure this out, as all the examples on other websites require the user to hover or click a button or some other action.

• javascript
• jquery
• html

• If you are using a framework like boostrap, they have built-in tooltips (getbootstrap./javascript/#tooltips) and their bigger cousins: popovers (getbootstrap./javascript/#popovers) - otherwise, you can look at their code and how they did it – blurfus Commented Apr 4, 2016 at 22:49
• Also, remember these are 'opt-in' items - meaning, you need to enable them yourself - if you are using bootstrap, I'll provide a more plete answer (I don't want to add an answer about bootstrap if you are not using it) – blurfus Commented Apr 4, 2016 at 22:53
• Yes, I am using bootstrap and the native tooltip feature. I'm trying to get the hidden tooltip to show up without hovering. I am willing to use JQuery and Bootstrap to get this done. – TheGenie OfTruth Commented Apr 4, 2016 at 22:56
• I see, I updated my answer now – blurfus Commented Apr 4, 2016 at 23:05

3 Answers 3

Tooltips in bootstrap are 'opt-in' items - meaning, you need to enable them yourself -

See below:

UPDATE

To always show tooltips: trigger the tooltips manually at page load time, see updated code below

$(function() {
  $('#mydiv').tooltip({
    trigger: 'manual'
  });

  $("button").on('click', function() {
    $('#mydiv').tooltip('toggle');
  });
});

#mydiv {
  width: 400px;
  border: 1px solid blue;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<button type="button" class="btn btn-default">Click to show Tooltip</button>


<hr/>
<div id="mydiv" title="This is the tutorial!" data-toggle="tooltip" data-placement="bottom">tooltip here?</div>

first give the div an id or class:

<div id='tutorial1' title = "This is the tutorial!" data-toggle = "tooltip"></div>

then attach a mouseover/mouseout event to that which shows/hides it:

$('#id_of_thing_you_hover')..mouseover(function () {
    $('#tutorial1').show();
  })
  .mouseout(function () {
    $('#tutorial1').hide();
  });

The .hide() and .show() jQuery functions simply toggle the element's display property

There are a few ways you can acplish this.

Using JQuery UI (The examples should show you that you can do something real quick. https://jqueryui./tooltip/)

You can either use custom Javascript as below

var div = document.querySelector('#[yourdivId]');
div.addEventListener('mouseenter', function(){
    var tooltip = document.getElementById(this.getAttribute("data-toggle"));
    tooltip.classList.remove("[yourHiddenClassName]");
})
div.addEventListener('mouseleave', function(){
    var tooltip = document.getElementById(this.getAttribute("data-toggle"));
    tooltip.classList.add("[yourHiddenClassName]");
})

or equivalent JQuery like below

$("#[yourdivId]").mouseenter(function() {
    var tooltipId = this.data("toggle");
    $("#" + tooltipId).show();
})
.mouseleave(function() {
     var tooltipId = this.data("toggle");
     $("#" + tooltipId).hide();
});