Tooltip

Static content

show tooltip here
hover me
Tooltip with a static content defined using the getCont property.
The `hover` property specifies the element that triggers the tooltip when hovered, such as `#statArea1`.
In cases where `hover` is omitted, it defaults to the document.
The `hsel` property defines a selector which could be used for dynamically added elements, ensuring the tooltip works even for content loaded after the initial page render.
PopupDemo/Tooltip.cshtml
<div id='statArea1' class="tip1">
    show tooltip here
</div>

<div class="loadedArea1 tip1">hover me</div>

<script>
    $(function(){
        awem.hovPopup({
            hover: '#statArea1',                
            getCont: () => `static tooltip content`
        });
                    
        awem.hovPopup({
            // unspecified hover, defaults to document
            hsel: '.loadedArea1', // selector
            getCont: () => `content 2`
        });
    });
</script>

Show hint using a popup

show tooltip here
When hovering the defined area a popup defined by is opened.
PopupDemo/Tooltip.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
    Name = "tooltipPopup1",        
    Url = Url.Action("Popup1"),
    Dropdown = true
}))

<div id='hoverArea1' class="tip1">
    show tooltip here
</div>

<script>
    $(function(){
        awem.hovPopup({
            hover: $('#hoverArea1'),                
            name: 'tooltipPopup1', // popup name
            // hclose: true // will close when hovering the opened popup
        });
    });        
</script>

Get hint content from hovered container

hover me
hover me
hover me
hover me (html content hint)
Getting the tooltip content from the hovered container. Either from a data attribute, or from a nested element.
PopupDemo/Tooltip.cshtml
<div>
    <div class="tip2" data-info="first">hover me</div>
    <div class="tip2" data-info="second">hover me</div>
    <div class="tip2" data-info="third">hover me</div>
</div>

<div class="tip3">
    hover me (html content hint)
    <div class="hidden hint">
        html <b>hint</b><br />
        hint content hidden inside the hover element
    </div>
</div>
<script>
    $(function(){
         awem.hovPopup({
            hover: $('.tip2'),                
            getCont: (opener) => opener.data('info'),
            topen: 30, // time to open
            hclose: true // will close when hovering the opened popup
        });

         awem.hovPopup({
            hover: $(document),
            hsel: '.tip3',
            tclose: 50, // time to close, default 300
            getCont: (opener) => opener.find('.hint').html()
        });
    });
</script>



 Comments