Bootstrap tooltip
Permalink 2 users found helpfulI 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.
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>
Adding the following attribute
data-html="true"
html: true
<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 });
http://documentation.concrete5.org/developers/working-with-blocks/c...
Your code, as displayed, should work. (Gave it a quick try overhere:http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&fil...