How to adjust the location of lightning-helptext

Question

I want to move the sf logo (tooltip) 2-3 pixels up so I tried to add custom CSS such as margin-bottom or padding-bottom to the element but it doesn't move.

Couldn't find anything relevant in the documentation, and I really prefer to use this element out-of-the-box and not to create one myself using SLDS.

Demo

Answer 1

IF you Just want to move the SF logo you can try this

<template>
    <div class="slds-text-body_small">The quick brown fox jumps over the lazy dog.
       <span style="position:relative; top:-2px;"> <lightning-helptext icon-name="utility:salesforce1" content="Click the icon"></lightning-helptext></span>
    </div>
</template>

there could be multiple other ways to do this

Answer 2

Hey try this Playground

Basically, wrapping the element in a span and adding css to the span element