Mark Discussion as Helpful Reply

(OLD 5.7 Discussion FORUM)

Bootstrap tooltip

Permalink 1 user found helpful March 23, 2015 at 4:37 AM

Hello everyone.

I have been trying to use bootstrap's .tooltip on my page but I can't get it to work. Any ideas on how to use it? I am using 5.7.3.1 with Elemental theme.

<a href="#" data-toggle="tooltip" title data-original-title="Some Title Here">?</a>

Can anyone help me here please.

teddenl replied on Mar 23, 2015 at 6:11 am Permalink Reply

Do you have an url for us?
Your code, as displayed, should work. (Gave it a quick try overhere:http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&fil...

LittleSnowman replied on Mar 23, 2015 at 6:20 am Permalink Reply

Sorry no URL. I develop the site on my testing server on my local network.

MrKDilkington replied on Mar 23, 2015 at 6:26 am Permalink Best Answer Reply

Hi LittleSnowman,

To use Bootstrap Tooltips, you need the tooltip CSS and JavaScript to make them work. Both assets are available within concrete5 5.7, but must be required.

In your theme page_theme.php, these assets must be required in registerAssets():
- $this->requireAsset('css', 'bootstrap/tooltip');
- $this->requireAsset('javascript', 'bootstrap/tooltip');

If you are using the Elemental theme, the Bootstrap CSS has already been required.
- $this->providesAsset('css', 'bootstrap/*'); - requires all Bootstrap CSS assets

This script will run the tooltip JavaScript:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

The tooltip and script can be put into an HTML block:

<a href="#" data-toggle="tooltip" title data-original-title="Some Title Here">?</a>
<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>