How can I use jQuery at Electron?

Question

I am building an Electron App which when run the tooltips are coming up plain and not the ones designed for Bootstrap. If I run the HTML below in its own browser it works fine. If I run it inside of an Electron App it does not work, the tooltips come up plain. I have also tried installing them via npm as a solution, which did not work.

I created a minimal project in electron to which I will import below. To test you will need to create a test directory with electron.

Most things are working for Bootstrap under electron, just not the tooltips and popovers.

const electron = require('electron')
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

{
  "name": "newelectronapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</head>
<body>
<div class="container">
<h3 class="text-info">Tooltip Demo in all directions</h3>
<br /><br /><br /><br />
<button type="button" id="tooltip-demo" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Left">
  Left Demo
</button>
<button type="button" id="tooltip-demo" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="A demo of bottom tooltip">
  Bottom Demo
</button>
<button type="button" id="tooltip-demo" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="A demo of top tooltip">
  Top Demo
</button>
<button type="button" id="tooltip-demo" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="A demo of right tooltip">
  Right Demo
</button>

</div>

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

Why are you using CDNs instead of installing the dependencies through node? — spring, Apr 23 '20 at 19:12
oh... hmm... I must have missed that detail. I did in fact install the dependencies on my end in my project. Installation of these dependencies does not address the issue. I will try the — DaveK, Apr 23 '20 at 23:15
If the dependencies are installed and why the `package.json` doesn't contain the dependency information? — tpikachu, Apr 24 '20 at 00:51
Does this answer your question? [Electron: jQuery is not defined](https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined) — balexandre, Apr 24 '20 at 13:50
What I did is run npm to install jquery, bootstrap and popper and with a minimal application it did work. However when applied to my project it still will not work. Until I realized this issue. Sometimes you have to run the following jquery command to make tooltips work: $('[data-toggle="tooltip"]').tooltip(). Well that's not the only thing that needs to be done. This needs to done everytime you dynamically add elements with tooltips. Correct installation, using the above Jquery call, and calling again when you add dynamic html is the complete solution. — DaveK, Apr 24 '20 at 20:02

score 1 · Accepted Answer · answered Apr 23 '20 at 19:01

1

Please install your jquery as dependency

npm install --save jquery

And then at your index.html add this script.

  <head>
    <script>
      window.$ = window.jQuery = require("jquery");
    </script>
    ....

You can remove this jquery cdn library then.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

answered Apr 23 '20 at 19:01

tpikachu

4,478
2
17
42

I do have these dependencies installed and proper require functions called however I do not have that – DaveK Apr 23 '20 at 23:15

How can I use jQuery at Electron?

1 Answers1