stevenbenner / jquery-powertip

:speech_balloon: A jQuery plugin that creates hover tooltips.
https://stevenbenner.github.io/jquery-powertip/
MIT License
821 stars 137 forks source link

Add a option for hide the arrow #183

Closed p4535992 closed 7 months ago

p4535992 commented 2 years ago

Can you add an option for hide the arrow ? powertip_nocross

stevenbenner commented 1 year ago

I would probably be possible. However, PowerTip is designed to be customizable via CSS. So I think that the best solution would be to alter the CSS applied to the tooltip when you are setting up PowerTip on your website.

I can think of two options...

Override CSS

You can use the default CSS file included with PowerTip, then add some CSS to your page's stylesheets that will disable the arrows. For example:

#powerTip {
    border-color: transparent;
}

So long as this CSS rule is loaded after the PowerTip CSS file, then the arrows should be gone.

Create your own tooltip CSS

Alternatively, you can choose to omit the PowerTip CSS from your page entirely and add the CSS manually. For example:

#powerTip {
    background-color: #333;
    border-radius: 6px;
    color: #fff;
    display: none;
    padding: 10px;
    position: absolute;
    white-space: nowrap;
    z-index: 2147483647;
}

This would allow you to totally control the look of the tooltips without having to override any styles that are included with PowerTip. There are a number of concerns to be aware of when styling your own tooltips, but they should all be covered under the CSS requirements section of the docs