Menu
I am trying to use the Bootstrap tooltip in an app of mine. Currently, I have the following:
<button type="button" class="btn btn-default"
data-toggle="tooltip" data-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
Unfortunately, my tooltip is not showing. I'm trying to figure out what I'm doing wrong. I know that it can be created via JavaScript. However, I'm trying to define my tooltip declaratively. I've confirmed that the Tooltip.js file is being included. However, I can't figure out what I'm doing wrong.
Is it possible to use a tooltip in a pure declarative sense? If so, can someone show me how via a JSFiddle or Bootply sample? I'm really banging my head on this one.
937
To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with JavaScript to work.
Single element To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
How To Create a Tooltip. To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
No, it is not possible to use the tooltip in a pure declarative sense. From the Docs:
Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
So you must call .tooltip() manually in JavaScript like this:
$("[data-toggle=tooltip]").tooltip();
Or use whatever selector you want.
Which should look like this:
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
