Hi all,
I am trying to insert a simple button that shows a tooltip, but it does not work.
I tried to use both the line " <button type=“button” class=“btn btn-secondary” data-toggle=“tooltip” data-placement=“right” title="" data-original-title=“Tooltip on right” aria-describedby=“tooltip684605”>Right</button>" into the code and Wappler Dynamic Attributes + Tooltip without success.
Can you help me, please?
Thanks!
You should only be using dynamic attributes of Wappler it will generate the code needed.
It would be nice if you provide a link to your page.
Thanks for your reply.
Unfortunately, the page I am creating is on localhost.
However, I recreated the button completely using Wappler only.
The HTML code is:
<button class="btn btn-secondary" dmx-bs-tooltip="Test" data-placement="right">Button</button>
Thanks.
You should wrap static tooltip content in quotes:
'test' and not test
It works now! Thank you very much!
However, I have not found any information in the Wappler documentation regarding the single quotes, not even in the Bootstrap documentation.
Thank you.
Moreover, I would like to assign an action to it. Go to a simple URL.
This is the result:
<button class="btn btn-secondary" dmx-bs-tooltip="'Test'" data-placement="right" data-toggle="button" onclick="???">Button</button>
As you can see, I inserted question marks because Wappler interface does not help you to create the link.
So, I had to insert “location.href=‘test.php’;” manually.
Well, for links use an anchor button 
Wow! A lot easier using the anchor button.
Thanks again!
a question
the tooltips are with black background and white text
Is it possible to change the colors from the design section?
Additional question: how can we remove the tooltip once clicked on the link?
Maybe you have to use Hover and don’t click
The tooltip is on a textlink to an external page with a blank target. When we return to the first page the tooltip still stick on the textlink. It just dissapear when we click on a next textlink.
This is the code:
a class=“nav-item nav-link p-0” href=“http://www.externalpage.be " dmx-bs-tooltip=” ‘tooltiptext’ " data-trigger=“hover” target="_blank" data-animation=“false” data-placement=“bottom”>-New page</a
I would suggest using the hover … you seem to be missing it in your code?
<a href="[anotherpage.html](http://webcrea.be/anotherpage.html)" dmx-bs-tooltip="' tooltip1'" data-placement="right" style="display: block;" target="_blank">LINK1</a>
<a href="[anotherpage.html](http://webcrea.be/anotherpage.html)" dmx-bs-tooltip="' tooltip2'" data-placement="right" style="display: block;" target="_blank">LINK2</a>
<a href="[anotherpage.html](http://webcrea.be/anotherpage.html)" dmx-bs-tooltip="' tooltip3'" data-placement="right" style="display: block;" target="_blank">LINK3</a>
It is activated in the Properties but not shown in the code. I think this is the default trigger in dmxBootstrap4Tooltips.js
I also have no idea what the ‘Animation’ provokes.
I found out that you can customize the tooltip in your custom css:
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: #fff !important;
text-align: center;
background-color: #8a0b0b !important;
border-radius: 0.25rem;
}
If you want to customize the arrow also then put:
.bs-tooltip-right .arrow::before {
right: 0;
border-width: 0.4rem 0.4rem 0.4rem 0;
border-right-color: #8a0b0b !important;
}
And accordingly change the parameters:
bs-tooltip-top/bottom/right/left .arrow::before
border-top/bottom/right/left-color:
Thank You very much
I have not found a solution yet
You’ll need to give your links a style class like .tooltip-link and then try adding this:
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
$('.tooltip-link').click(function(){
$('[data-toggle="tooltip"]').tooltip('hide');
});
This should hide the tooltip on-click.
The tooltip actually disappears with onclick but I want it to disappear with a mouse movement outside the link.
This is latin to me. Can not paste this in my css.