Forums

Bootstrap tooltip

Permalink 2 users found helpful
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 at Permalink Reply
teddenl
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 at Permalink Reply
Sorry no URL. I develop the site on my testing server on my local network.
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
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>
LittleSnowman replied on at Permalink Reply
Thank you so much. That did the trick and it now works fine. :-)
daenu replied on at Permalink Reply
daenu
Just as an addition to MrKDilkington's answer:

Adding the following attribute
data-html="true"
or Javascript property
html: true
allows to have the tooltip as HTML rather than text only:

<a href="#" data-toggle="tooltip" data-html="true" data-original-title="<span style='color: red'>Some Title Here</span>">?</a>

Or when initiating:
$('[data-toggle="tooltip"]').tooltip({
     html: true
});
ob7dev replied on at Permalink Reply
ob7dev
If anyone needs to add tool tips to their custom blocks see:
http://documentation.concrete5.org/developers/working-with-blocks/c...