-1

The tooltip's style doesn't work when using bootstrap 4. But when using bootstrap 3.4 it works.

for example: X<sub>1</sub> dosn't look like: X1.

The following doesn't works:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script  src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script async src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

The following works:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

I'm using:

<a href="#" data-html="true" data-toggle="tooltip" 
title="Hooray! <sub>2</sub>">Hover over me</a> 

<script>
$(document).ready(function() {$('[data-toggle="tooltip"]').tooltip() });
</script>

I tried to change the jquery to 3.4.0 but it didn't help.

Oren Ben-Harim
  • 81
  • 1
  • 8
  • Try to replace title attribute by data-title for Bootstrap 4. – Paul May 12 '19 at 12:24
  • Hi Paul, do you mean: ~~~~ data-title="Hooray!2" instead of title="Hooray!2" ~~~~ Didn't work . – Oren Ben-Harim May 12 '19 at 12:38
  • I use BS4 like this : `rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="left" data-html="true" data-title="someHtmlTooltip"` and `$('[rel="tooltip"]').tooltip({ trigger: 'hover', placement: 'left' });` – Paul May 12 '19 at 13:01
  • BS4 rely on PopperJS to display tooltips, did you include it? `` – Paul May 12 '19 at 13:04
  • Thank you Paul, I tried before to add it but it didn't help – Oren Ben-Harim May 12 '19 at 13:12
  • Do you have any error in console log? – Paul May 12 '19 at 13:26
  • ```````````jquery-3.3.1.slim.min.js:2 Uncaught TypeError: $(...).tooltip is not a function at HTMLDocument. (temp.html:34) at l (jquery-3.3.1.slim.min.js:2) at c (jquery-3.3.1.slim.min.js:2) – Oren Ben-Harim May 12 '19 at 13:30
  • Can you try with importing a full jquery dist, not the slim one ? – Paul May 12 '19 at 13:34
  • I tried the full 3.3.1 and the full 3.4.1 `````` jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).tooltip is not a function at HTMLDocument. (temp.html:39) at l (jquery-3.3.1.min.js:2) at c (jquery-3.3.1.min.js:2) ``````````` – Oren Ben-Harim May 12 '19 at 13:37
  • Can you try with removing async attribute from BS import ? – Paul May 12 '19 at 13:46
  • Solved! thank you. So only for tooltip in can't be async? I assume it mont be good for page load time ...:( – Oren Ben-Harim May 12 '19 at 13:55
  • You are welcome. You need those functions to execute yours so you can choose to load dependencies async and check for loading before execute your functions or defer your script. Check for defer and async attributes. By the way you can also put your scripts tag at the end of the body so DOM is loaded before javascript scripts and the feeling isn't blocking even if async scripts are not loaded yet. – Paul May 12 '19 at 14:27
  • 1
    Thanks again Paul for your great help :) I tried now defer, which should be like locating it in the end of the body and it works as well:). As I understand async should be "in the middle" between regular script and defer script. So I don't why defer works and async doesn't work? I'm reading from time to time the nice diagram in the following: https://stackoverflow.com/questions/10808109/script-tag-async-defer PS as you suggested async and the following, also does the job ! $(window).on('load', function() {$('[data-toggle="tooltip"]').tooltip() }); – Oren Ben-Harim May 12 '19 at 23:54
  • 1
    Okay, I understand, since bootstrap.min.js depends on jquery it must be "defer", otherwise it may be executed before jquery was loaded – Oren Ben-Harim May 13 '19 at 00:44

1 Answers1

0

in bootstrap-4, if you use the tooltip you must include the popper.js
bootstrap.min.js shouldn't be async since it depends on the popper and the jquery.

Oren Ben-Harim
  • 81
  • 1
  • 8