Tooltpis Get rid of the bubble line


#1

Hi Guys…

Anyone who knows how to get rid of the bubble line in the ToolTip…

I want to use this Hover function to present, Price, Color, Name and so on.

There is an -Tooltip Class … but I can´t get to work as I want.


#2

I have solved it now.

If some one is interested: use this style code, in the Head of the document.

/* Tooltip */

.tooltip > .tooltip-inner { background-color: none; color: #FFFFFF; border: 1px solid white; padding: 15px; font-size: 20px; } .tooltip.top .tooltip-arrow { border-top-color:white; } .tooltip.top .tooltip-border { border-top-color: yellow; } .tooltip.top-left .tooltip-arrow { border-top-color:white; } .tooltip.top-right .tooltip-arrow { border-top-color:white; } .tooltip.right .tooltip-arrow { border-right-color: white; } .tooltip.left .tooltip-arrow { border-left-color: white; } .tooltip.bottom .tooltip-arrow { border-bottom-color: white; } .tooltip.bottom-left .tooltip-arrow { border-bottom-color: white; } .tooltip.bottom-right .tooltip-arrow { border-bottom-color: white; } /*You could put this in the page Add custom code to head & body area (head code). Just change the color to what you want, and surround the code with style tags .tooltip-inner handle the box around the text, change background color, border line, size */

#3

It seems that “.tooltip-arrow” has been deleted from Bootstrap 4 for some reason:

So if, for example, you want your tooltip background and arrow to be red, you can no longer get the arrow to be red (below is a minor variant of your code):

<style type="text/css">
    .tooltip-inner { background-color: red; color: yellow; border: none; padding: 15px; font-size: 12px; } .tooltip.top .tooltip-arrow { border-top-color:red; } .tooltip.top .tooltip-border { border-top-color: red; } .tooltip.top-left .tooltip-arrow { border-top-color:red; } .tooltip.top-right .tooltip-arrow { border-top-color:red; } .tooltip.right .tooltip-arrow { border-right-color: red; } .tooltip.left .tooltip-arrow { border-left-color: red; } .tooltip.bottom .tooltip-arrow { border-bottom-color: red; } .tooltip.bottom-left .tooltip-arrow { border-bottom-color: red; } .tooltip.bottom-right .tooltip-arrow { border-bottom-color: red; }
</style>

#4

Check my answer here: