Tooltip Asset(s)
Permalink
I'm trying to get bootstrap tooltips to work on a single page. I've followed this:
https://documentation.concrete5.org/developers/working-with-blocks/c...
...and everything works swimmingly—but only when logged in as admin.
I conclude that I need to requireAsset something(s). I've tried a variety of the bootstrap offerings listed on
https://documentation.concrete5.org/developers/appendix/asset-list...
but no joy. (My requireAsset code is definitely being executed: I can cause errors by requiring something invalid.)
Am I on the right track? What asset(s) are required? Thanks!
https://documentation.concrete5.org/developers/working-with-blocks/c...
...and everything works swimmingly—but only when logged in as admin.
I conclude that I need to requireAsset something(s). I've tried a variety of the bootstrap offerings listed on
https://documentation.concrete5.org/developers/appendix/asset-list...
but no joy. (My requireAsset code is definitely being executed: I can cause errors by requiring something invalid.)
Am I on the right track? What asset(s) are required? Thanks!
Hi Gondwana,
You can request the Bootstrap Tooltip.js asset.
You will need to register the Bootstrap Tooltip CSS as an asset and then require it.
The core Bootstrap CSS can be requested, but it is namespaced to the .ccm-ui class, so it will not be available to your front-end pages.
You can request the Bootstrap Tooltip.js asset.
$this->requireAsset('javascript', 'bootstrap/tooltip');
You will need to register the Bootstrap Tooltip CSS as an asset and then require it.
The core Bootstrap CSS can be requested, but it is namespaced to the .ccm-ui class, so it will not be available to your front-end pages.
Thank you both. I'll refactor my current mess to have a controller, and try the code therein.
Unfortunately, the native bootstrap tooltip code seems quite different to the c5 version (for example, it doesn't seem to have a launch-tooltip class).
It's a shame that the c5 version is wrapped in .ccm-ui, since this precludes its general use. (I was tempted to wrap my page in .ccm-ui despite the likelihood of conflicts when editing.)
Even though I included
in my controller, no additional statements seemed to be injected into my page. This probably doesn't matter because the .ccm-ui namespacing would have precluded its use anyway.
It's a shame that the c5 version is wrapped in .ccm-ui, since this precludes its general use. (I was tempted to wrap my page in .ccm-ui despite the likelihood of conflicts when editing.)
Even though I included
$this->requireAsset('javascript', 'bootstrap/*'); $this->requireAsset('css', 'bootstrap/*');
in my controller, no additional statements seemed to be injected into my page. This probably doesn't matter because the .ccm-ui namespacing would have precluded its use anyway.
I generally include the 'standard' version of BS in my themes via the asset system. If you go that route you have to mark the core assets as provided or you'll run into JavaScript conflicts with the editing interface:
This can still lead to JavaScript conflicts when you want to create stacks in the dashboard because BS will be loaded twice there.
Maybe it's worth a try just to include the BS CSS (I assume the JavaScript is not namespaced).
public function registerAssets() { $this->providesAsset('javascript', 'bootstrap/*'); $this->providesAsset('css', 'bootstrap/*'); $this->requireAsset('theme/bootstrap'); $this->requireAsset('javascript', 'jquery'); }
This can still lead to JavaScript conflicts when you want to create stacks in the dashboard because BS will be loaded twice there.
Maybe it's worth a try just to include the BS CSS (I assume the JavaScript is not namespaced).
Thanks Jakob. I've had to abandon this; it's become overwhelmingly complicated and problematic.
For the record, I seem to have got this working. The block needs only one additional asset:
What I was missing was something like this:
This is necessary because tooltips are not automatically registered.
$this->requireAsset('javascript','bootstrap/tooltip');
What I was missing was something like this:
<script type="text/javascript"> $(document).ready(function() { $(".launch-tooltip").tooltip(); }); </script>
This is necessary because tooltips are not automatically registered.
This loads all core bootstrap assets (the same you'll get when you are logged in).
If you don't have a single page controller you can also require it in the page_theme.php on_start method.