Dismiss Notice

Chào bạn!

Hãy đăng nhập diễn đàn nopViet.com để thảo luận và nhận thông tin mới nhất về nopCommerce nhé.

Đăng nhập bằng Facebook

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 'Thảo luận về Thiết kế 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:
    286
    Đ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...

    Chủ đề liên quan Diễn đàn Date
    VIDEO Video hướng dẫn tạo database và sử dụng cơ bản MS SQL Server 2005 Quản trị Windows Server 25/12/16
    Anh em cho hỏi mình muốn tạo 1 chuỗi cửa hàng ntn Hướng dẫn, góp ý về diễn đàn 18/11/16
    Tạo thêm nội dung khi tạo sản phẩm ngoài cái short và full description mặc định Hướng dẫn sử dụng, cấu hình NOP 31/1/16

  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...