Tạo tooltip xem trước mô tả khi rê chuột vào hình sản phẩm

Thảo luận trong 'Tùy chỉnh giao diện' bắt đầu bởi An Nguyen, 27/9/14.

  1. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    395
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    Bạn muốn hiện tooltip như vậy không
    2014-10-01_233448.png
    Sau đây mình sẽ hướng dẫn chi tiết từng bước thực hiện
    Bước 1: HTML

    Tìm trong file Views\Shared\_ProductBox.cshtml
    Tìm
    HTML:
    <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
    Thêm và sửa thuộc tính titlemasterTooltip
    HTML:
    <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Html.Raw(Model.ShortDescription)" class="masterTooltip"/>
    
    title là nội dung muốn hiện tooltip, @Html.Raw(Model.ShortDescription) chính là mô tả ngắn gọn về sản phẩm

    Bước 2: CSS
    Thêm đoạn CSS sau:
    HTML:
    .tooltip {
        display:none;
        position:absolute;
        border:1px solid #333;
        background-color:#161616;
        border-radius:5px;
        padding:10px;
        color:#fff;
        font-size:12px;
        white-space:pre-line;
        text-align: left;
    }
    
    Đây là thiết lập css cho tooltip

    Bước 3: Jquery
    Tạo và chèn script này vào Views\Shared\_Root.Head.cshtml
    HTML:
    <script type="text/javascript">
    $(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function(){
            // Hover over code
            var title = $(this).attr('title');
            $(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
    }).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
    });
    });
    </script>
    Có thể thay đổi tốc độ hiển thị tooltip ở dòng .fadeIn

    Chúc mọi người thực hành tốt nhé


    Tham khảo: alessioatzeni
     
    Sửa lần cuối: 1/10/14
    Tags:
    KenMTkju47 thích bài này.
  2. Đang tải...


  3. Tarzan

    Tarzan NopNew

    Bài viết:
    5
    Điểm:
    3
    Bài viết hữu ích quá! Cảm ơn bạn!
     
  4. KenMT

    KenMT NopActive

    Bài viết:
    41
    Điểm:
    8
    Hay ....
     
Draft saved Draft deleted
Tags:

Chia sẻ trang này

Đang tải...