CODEWITHSUNDEEP
javascriptjqueryhtml
TheGenie OfTruth
TheGenie OfTruth

Reputation: 628

Toggling hidden tooltips using JavaScript/JQuery

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.

Upvotes: 1

Views: 7738

Answers (3)

ash
ash

Reputation: 329

There are a few ways you can accomplish this.

Using JQuery UI (The examples should show you that you can do something real quick. https://jqueryui.com/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();
});

Upvotes: 1

blurfus
blurfus

Reputation: 14031

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/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>

Upvotes: 3

Pabs123
Pabs123

Reputation: 3435

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

Upvotes: 1

Related Questions